Develop Reference

ajax datatable, cannot retrieve data

I Edited my code, but the problem now is i can't retrieve my data but there is no error in my code, Also i have records in my database. I can't figure it out why my data is not dislaying.
//Controller - where i getting my data in database.
public ActionResult GetEmployeeFlexiSched()
{
string query = "exec spdGetEmployeeFlexiSched";
string strReturn = GlobalFunction.DataTableToJSON(GlobalFunction.TableFromMSSQL(conn, query));
return Json(new { success = true, data = strReturn }, JsonRequestBehavior.AllowGet);
}
<script>
$(document).ready(function () {
var dataTable = $('#OedTB').DataTable({
"language": {
emptyTable: "No Transaction"
},
ajax: {
url: '#Url.Action("GetEmployeeFlexiSched", "FlexiSchedule")',
dataType: "json",
retrieve: "true",
processing: "true",
serverSide: "true",
type: "POST",
dataSrc: "",
},
order: [],
columnDefs: [
{
orderable: false,
}
],
columns: [
{data: "TranNo"},
{data: "FullName"},
{
data: "TranNo",
render: function (data, type, row, meta) {
return '<button type="button" class="btn btm-sm btn-outline-danger viewdetails" id="' + data + '"><i class="fas fa-info-circle"></i></button>';
}
},
]
});
});
</script>

Field name is in JSON but datatables don't recognise it?

The error message is as below:
Requested unknown parameter 'emPONumber' for row 0, column 0
But emPONumber is in the JSON, why datatables still prompt this error?
<script type="text/javascript">
$(document).ready(function () {
var tableId = 'tablePurchaseOrders';
var table = $('#' + tableId).DataTable({
"processing": true,
"serverSide": true,
"ajax": {
url: 'http://localhost/ControlTower2WebAPI/api/PurchaseOrder/GetAllUploadedPurchaseOrders',
type: 'GET',
data: function (data) {
//debugger;
var model = {
draw: data.draw,
start: data.start,
length: data.length,
columns: data.columns,
search: data.search,
order: data.order
};
return model;
},
failure: function (result) {
debugger;
alert("Error occurred while trying to get data from server: " + result.sEcho);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
alert("Error occurred while trying to get data from server!");
},
dataSrc: function (json) {
var _data = JSON.stringify(json.Data);
debugger;
return _data;
}
}
,
"columns": [
{ "data": "emPONumber", title: "emPONumber" },
{ "data": "ASMPONumber", title: "ASMPONumber" },
{ "data": "material", title: "material" }
]
});
});
</script>
json in dataSrc: function (json):
{"ContentEncoding":null,"ContentType":null,"Data":{"draw":1,"recordsTotal":1,"recordsFiltered":1,"data":[{"emPONumber":"EM1234567","ASMPONumber":"A741000013","material":"26-00010","quantity":5,"UOM":"EA","asmPOQuantity":5,"createBy":"m","ASMPOYear":2018,"ASMPOMonth":6,"ASMPOVendor":"10008"}]},"JsonRequestBehavior":1,"MaxJsonLength":null,"RecursionLimit":null}
json (_data) return by ajax in dataSrc:
{
"draw":1,
"recordsTotal":1,
"recordsFiltered":1,
"data":
[{
"emPONumber":"EM1234567",
"ASMPONumber":"A741000013",
"material":"26-00010",
"quantity":5,
"UOM":"EA",
"asmPOQuantity":5,
"createBy":"m",
"ASMPOYear":2018,
"ASMPOMonth":6,
"ASMPOVendor":"10008"
}]
}

Try
dataSrc: function (json) {
for(key in json.Data){ json[key] = json.Data[key]; }
delete json['Data'];
return json.data;
}

In the View how to send a data in javascript to the controller

I have a datatable and I want, when I click some row I get row id and go back to the controller and uptade some data by the row id. I am getting row id(data.SiparisID) BUT I cant send data to controller`#section scripts{
<script>
$(document).ready(function () {
});
$("#SiparisTable").DataTable({
"ajax": {
"url": "/Goster/getList",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "SiparisID" },
{ "data": "SiparisAd" },
{ "data": "SiparisModel" },
{ "data": "SiparisTur" },
{ "data": "SiparisAdet" },
{ "data": "SiparisTarih" },
{ "data": "SiparisDurum" },
{
"data": "SiparisID", "render": function () {
return "<input type='submit' value='Güncelle' class='btn btn-default' onclick='backoperation()' />"
}
}
]
});
var table = $('#SiparisTable').DataTable();
$('#SiparisTable tbody').on('click', 'tr', function () {
var data = table.row(this).data();
alert('You clicked on ' + data.SiparisID + '\'s row');
});
</script>
<script>
function backoperation() {
window.location.href = "#Url.Action("Index", "Guncelle")";
}
</script>
}
`

function backoperation() {
window.location.href = "#Url.Action("Index", "Guncelle")?param=obj";
}
this case it redirect to another page
or
you can make request through Ajax request
"ajax": {
"url": "/Goster/getList??param=obj",
"type": "GET",
"datatype": "json"
},
then it come in your controller
this case it updated in same view

var table = $('#SiparisTable').DataTable();
$('#SiparisTable tbody').on('click', 'tr', function () {
var data = table.row(this).data();
alert('You clicked on ' + data.SiparisID + '\'s row');
$.ajax({
url: '/Guncelle/Process',
type: 'GET',
data: {
id: data.SiparisID,
success: function () { },
error: function () { }
}
});
});**THE VIEW**
public ActionResult Process(int id)THE CONTROLLER
{}
I found this and this work for me. I can get the id in the script with this controller

Tabbing doesnt work for datatable

I m using jquery datatables in many pages and its working good in every page and in a single page its not working properly, i mean when i use tab to go through datatable, it works fine for the first time and when i try to do the same for second time, if i try to focus on any thing in few seconds in data table, the focus disappears and the foucs starts from the starting of the page.
Here goes the code
function tableCall(){
var clientId = $('#clientId').val();
var versionCount = $('#versionCount').val();
var fromDate = $('#fromDate').val();
var toDate = $('#toDate').val();
$.ajax({
url: auditTrail.props.reporttableURL,
type: "POST",
dataType: "json",
data: {
clientId:clientId,
versionCount:versionCount,
fromDate:fromDate,
toDate:toDate
},
success: function (data) {
searchJSON = data.data;
var len=searchJSON.length;
if (len > 0){
$('.no-data, #warning-sign').hide();
createTable();
}else{
$('.no-data').hide();
$('#warning-sign').show();
}
}
});
}
function createTable() {
wwhs.setADAAttrDynamic($('#auditTable'));
if ($.fn.DataTable.isDataTable('#auditTable')) {
// table.destroy();
$("#auditTable tbody").empty();
}
table = $('#auditTable').dataTable({
"searching":false,
"destroy":true,
"autoWidth": false,
"ordering": true,
"destroy":true,
"stateSave": true,
"drawCallback": attachEvents,
"stateLoadParams": function (settings, data) {
return false;
},
data: searchJSON,
columns: [{
data: "reportName"
}, {
data: "reportStatus"
}, {
data: "timeStamp"
}, {
data: "requestedBy"
}],
"columnDefs": [{
"render": function (data, type, row) {
if(row.reportStatus.toUpperCase() == 'PROCESSED')
return '<a class="blue-text" " data-name="'+ row.reportName +'">' + row.reportName + '</a>';
else
return row.reportName;
},
"width": "50%",
"targets": 0
}, {
"width": "15%",
"targets": 1
}, {
"width": "20%",
"targets": 2
}, {
"width": "15%",
"targets": 3
}]
});
}

I think the problem is because the datatable instance is not destroyed.
Since datatables saves all the nodes into an object and renders it when ever it wants, emptying the tbody doesnt do anything. it just removes the elements in the page which can be re-drawn/re-rendered by datatable from its stored object.
You can check if the object is already initialized and the destroy it before re-initializing.
if(typeof table != "undefined")
table.destroy();
So the final code will look something like
function tableCall(){
var clientId = $('#clientId').val();
var versionCount = $('#versionCount').val();
var fromDate = $('#fromDate').val();
var toDate = $('#toDate').val();
$.ajax({
url: auditTrail.props.reporttableURL,
type: "POST",
dataType: "json",
data: {
clientId:clientId,
versionCount:versionCount,
fromDate:fromDate,
toDate:toDate
},
success: function (data) {
searchJSON = data.data;
var len=searchJSON.length;
if (len > 0){
$('.no-data, #warning-sign').hide();
createTable();
} else {
$('.no-data').hide();
$('#warning-sign').show();
}
}
});
}
function createTable() {
wwhs.setADAAttrDynamic($('#auditTable'));
if ($.fn.DataTable.isDataTable('#auditTable')) {
if(typeof table != "undefined")
table.destroy();
}
table = $('#auditTable').dataTable({
"searching":false,
"destroy":true,
"autoWidth": false,
"ordering": true,
"destroy":true,
"stateSave": true,
"drawCallback": attachEvents,
"stateLoadParams": function (settings, data) {
return false;
},
data: searchJSON,
columns: [{
data: "reportName"
}, {
data: "reportStatus"
}, {
data: "timeStamp"
}, {
data: "requestedBy"
}],
"columnDefs": [{
"render": function (data, type, row) {
if(row.reportStatus.toUpperCase() == 'PROCESSED')
return '<a class="blue-text" " data-name="'+ row.reportName +'">' + row.reportName + '</a>';
else
return row.reportName;
},
"width": "50%",
"targets": 0
}, {
"width": "15%",
"targets": 1
}, {
"width": "20%",
"targets": 2
}, {
"width": "15%",
"targets": 3
}]
});
}

Clicking a button generated by Javascript with Selenium

I'd like to use Selenium or other package to automatically click the "Copy" button on one web page.
It seems that the button is generated by Javascript. Is it possible to do so? Thanks in advance!
<script src="media/portal/js/table-maker.js" type="text/javascript"></script>
Here is the piece of code in table-maker.js related to the "Copy" button:
this.generateEntityTable = function(entityName, ajaxDataProperty,
urlSuffix, objectHeadings, objectFields, hiddenFields,
tableSelector, tableId,
emptyMessage) {
if (!emptyMessage) {
emptyMessage = "No data available in table";
}
var oTable = $(tableSelector);
var tableElt = oTable[0];
var tableSource = {
"sourceType" : "json",
"structure" : {
"headings" : objectHeadings,
"fields" : objectFields
}
};
TableUtils.buildTableHtml(tableElt, tableSource.structure.headings);
var tableToolsProps = null;
if ('portalFile' == entityName) { // table does not allow row selection.
tableToolsProps = {
"aButtons" : []
};
} else if ('bspsample' == entityName) {
tableToolsProps = {
"aButtons" : [{
"sExtends": "copy",
"mColumns": "all"
},
{
"sExtends": "csv",
"mColumns": "all"
},
{
"sExtends": "xls",
"mColumns": "all"
}],
"sSwfPath" : "media/table-tools-2.1.5/media/swf/copy_csv_xls.swf"
};
} else {
tableToolsProps = {
"sRowSelect": "single",
"aButtons" : []
};
}
// this is to prevent DataTables from putting warnings or errors in an alert box.
$.fn.dataTableExt.sErrMode = 'throw';
try {
oTable.dataTable({
"bDestroy" : true,
"bRetrieve" : true,
"bJQueryUI" : true,
"bProcessing" : true,
"sPaginationType" : "full_numbers",
"sAjaxSource" : initialUrl + "rest/"+ urlSuffix,
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"success": function(result){fnCallback(result);},
"failure":function(result){alert('failure');}
} );
},
"sAjaxDataProp" : ajaxDataProperty,
"aoColumns" : this.fieldsToColumnProperties(objectFields, objectHeadings,
hiddenFields, entityName, tableSelector, tableId),
"sDom": 'T<"clear">lfrtip',
"oTableTools": tableToolsProps,
"oLanguage": {
"sEmptyTable": "Please wait - Fetching records"
},
fnInitComplete: function(oSettings){
oSettings.oLanguage.sEmptyTable = emptyMessage;
$(oTable).find(".dataTables_empty").html(emptyMessage);
}
});
} catch (err) {
var messageHandler = new MessageHandler();
messageHandler.showError("Internal client error: " + err + " Unable to create table for entity: "
+ entityName);
};
// this is required for row_selected styles to work.
oTable.addClass('display');
oTable.show(); // in case it was hidden
return oTable;
};