Develop Reference

datatable warning 4 - Requested unknown parameter '0' for row 0, column 0

I am working on datatable and facing this error :
DataTables warning: table id=table - Requested unknown parameter '0'
for row 0, column 0.
I have studied this link and it says that my table column defines in HTML doesn't match with the columns received from server. BUT in my case both are same.
Here is my HTML code :
<table id="table" class="display responsive nowrap" cellspacing="0" width="100%">
<thead style="background-color:#303641;">
<tr>
<th>aNumber</th>
<th>bNumber</th>
<th>cellID</th>
<th>dateTime</th>
<th>duration</th>
<th>imei</th>
<th>imsi</th>
<th>operatorId</th>
<th>mscId</th>
<th>fileId</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Datatable javascript code :
var dataTable = $('#table').DataTable({
"processing": true,
"serverSide": true,
"bFilter": false,
"iDisplayLength": configData,
dom: 'Bfrtip',
buttons: ['colvis', 'print', 'csv', 'excel', 'pdf'],
searching: false,
language: {
buttons: {
colvis: 'Show/Hide Columns'
}
},
"ajax": {
url: "getAdvanceCallAnalysisData.json",
data: function(d) {
return $.extend({}, d, {
"offset": 0,
"newRequest": newReq,
"totalRecords": total,
"lookInCol": "aNumber",
"lookInVal": "43543543",
"fromDate": from_date,
"toDate": to_date,
"callingCellId": "",
"CalledCellId": "",
"cdrType": "",
"smsType": "",
"durationFilter": "",
"selectColumns": "",
"sortCol": "",
"sortType": "",
});
},
type: "POST",
error: function() {
alert("error");
},
complete: function(data) {
total = data.responseJSON.recordsTotal;
newReq = 0;
test(total, newReq);
$("#loading_image").hide();
$(".show_datatable").show();
},
"aoColumns": [{
"mData": "aNumber"
}, {
"mData": "bNumber"
}, {
"mData": "cellID"
}, {
"mData": "dateTime"
}, {
"mData": "duration"
}, {
"mData": "imei"
}, {
"mData": "imsi"
}, {
"mData": "operatorId"
}, {
"mData": "mscId"
}, {
"mData": "fileId"
}]
}
});
you can see that my columns name and numbers match with the columns define in ajax response.
I have done same thing for another table and it was working fine but it shows error here. don't know why !!
json response : (It returns 15 records, I posted only two just to make it short)
{"msg":null,"code":null,"status":null,"data":[{"aNumber":"343","bNumber":"3434","cellID":"410-01-831-14770","dateTime":"2017-08-23 17:27:54.0","duration":419,"imei":"22380831696837","imsi":"35340311428389","operatorId":4,"mscId":"5","fileId":"4"},{"aNumber":"3434","bNumber":"5656","cellID":"410-07-1314-28271","dateTime":"2017-08-23 22:02:15.0","duration":785,"imei":"49776303943255","imsi":"35722667519554","operatorId":1,"mscId":"2","fileId":"5"}],"draw":1,"limit":1000,"recordsFiltered":12,"recordsTotal":12}
The most funny part is it shows the correct records and pagination even it display correct rows (with empty data) in datatable. This ajax call returns 15 records. Please see the image below :
Any idea, what is wrong here ?

Jquery Datatables ajax call won't run

I have following dataTables jquery in my js file
$("#manage_chauffeurs").dataTable({
"processing": true,
"bServerSide": true,
"aaSorting": [],
"ajax":{
'type': 'POST',
'url': '/admin/reports/chauffeurs_data'
},
"responsive": true,
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 14 ] }
],
"columnDefs": [ { targets: '_all', visible: true } ],
"dom": '<"top"f>rt<"bottom"p><"clear">',
"aoColumns": [
{ "mDataProp": "name", "sDefaultContent": "", "sClass": "center_align"},
{ "mDataProp": "user_id", "sDefaultContent": "", "sClass": "center_align" }
]
});
Below is the html
<table class="display responsive no-wrap" id="manage_chauffeurs">
<thead>
<tr>
<th width="50%">User Name</th>
<th width="50%">User ID</th>
</tr>
</thead>
</table>
I have the resource '/admin/reports/chauffeurs_data' set at my server. However, I don't get an ajax call. No call at all.
Browser console gives the following error:
jquery.dataTables.js?body=1:4090 Uncaught TypeError: Cannot read property 'style' of undefined
Checked for above error, I have no mismatch of columns in my code.
What could be going wrong here?
Someone please help!

Datatable aoColumnDefs is not working as expected

I am facing an issue with Datatable .
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<c:forEach items="${Details.columns}" var="column">
<th>${column.columnTitle}</th>
</c:forEach>
</tr>
</thead>
<tfoot>
<tr>
<c:forEach items="${Details.columns}" var="column">
<th></th>
</c:forEach>
</tr>
</tfoot>
<tbody>
<c:forEach items="${Details.callList}" var="call">
<tr>
<c:forEach items="${call.attributes}" var="attribute">
<td>${attribute.value}</td>
</c:forEach>
</tr>
</c:forEach>
</tbody>
</table>
$("#example1").dataTable({
'sDom': '"top"i',
//"aoColumnDefs": [{ "bSearchable": true, "aTargets": [1] }],
"bPaginate" : true,
"bLengthChange" : false,
//"bFilter" : true,
"bSearchable": true,
"bSort" : true,
"bInfo" : true,
"bAutoWidth" : false,
"iDisplayLength": 5
//}).columnFilter({"aoColumns": [{ "type": "text" }, { "type": "text" }, null]});
}).columnFilter({"aoColumnDefs": [{ "bSearchable": true, "aTargets": [2] }]});
From the above snippet.. i am trying to remove the filter/search for last column alone.
Here "aoColumns" works as expected - It removes the filter in last column as i coded,
However i am unable to use "aoColumns" . Since the columns in this table is dynamic/configurable, so it is tough for me to change the code everytime.
It would be really grateful if anyone can help me here..
Thanks,

This is how I use Datatables and it works like a charm. I don't do sorting at client-side, I do it at server-side using AJAX, but the configuration for the table should be the same except for "bServerSide=true". Let me know if this solves your problem:
var oTable = $('#tblMainTable').dataTable({
"searching": false,
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem('jobTitlesDataTables', JSON.stringify(oData));
},
"fnStateLoad": function (oSettings) {
return JSON.parse(localStorage.getItem('jobTitlesDataTables'));
},
"pagingType": "full_numbers",
"bLengthChange": false,
"bAutoWidth": false,
"iDisplayLength": 2000,
"bServerSide": true, // server side
"sAjaxSource": BASE_URL + "Job/GetJobTitleMappingDTOs", // AJAX URL
"bProcessing": true,
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
// send data from client-side to server-side
aoData.push({ "name": "IsMapped", "value": $("#bdgIsMapped").data("selected") });
aoData.push({ "name": "IsSearchableOption", "value": $("#bdgIsSearchable").data("selected") });
aoData.push({ "name": "timestamp", "value": new Date().getTime() }); // Added to avoid caching in some IE versions.
oSettings.jqXHR = $.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"cache": false,
"success": function (json) {
// shows records count next to the top title
if (json.iTotalRecords > 0) {
$("#resultsDescription").text(" - " + json.iTotalRecords + " rows.");
}
else {
$("#resultsDescription").text(" - No results.");
}
// shows paginator when necessary
if (json.iTotalRecords > json.iDisplayLength) {
$(".dataTables_paginate").show();
}
else {
$(".dataTables_paginate").hide();
}
$("#isFirstSearch").val("false");
fnCallback(json);
}
});
},
"aoColumnDefs": [
{
sType: "numeric",
mData: "RowNumber",
aTargets: [0],
mRender: function (data, type, full) {
// this is for custom rendering a column just in case you need it
// 'full' is the row's data object, and 'data' is this column's data
return '<span class="RowNumber">' + full.RowNumber + '</span>';
}
},
{
sType: "numeric",
mData: "JobTitleId",
aTargets: [1],
mRender: function (data, type, full) {
// 'full' is the row's data object, and 'data' is this column's data
return '<span class="EditableJobTitleId" data-job-title-id="' + full.JobTitleId + '">' + full.JobTitleId + '</span>';
}
},
{
sType: "string",
mData: "JobTitle",
aTargets: [2]
}
],
"order": [[1, "asc"]]
});

server side data loading from C# in jquery datatable

Hi i have successfully implemented jquery data table server side call,but i am unable to load data in html view
it just says processing
here is my Js code
$('#internetTable').dataTable({
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': 'api/values/GetInternetSales'
"aoColumns": [
{ "mData": "Calls" },
{ "mData": "LevelOneOperators" },
{ "mData": "LevelTwoOperators" },
{ "mData": "Issueraised" },
{ "mData": "SalesDate" },
{ "mData": "AutomaticResponses" }
]
});
and this is html code
<table id="internetTable" class="table table-bordered table-hover">
<thead>
<tr>
<th >Date</th>
<th>Issue Raised</th>
<th>Level One Operators</th>
<th >Level Two Operators</th>
<th>Automatic Responses</th>
<th>Calls</th>
</tr>
</thead>
</table>
And the response am getting from server is
{"sEcho":"2","iTotalRecords":10,"iDisplayStart":1,"iDisplayEnd":1,"iDisplayLength":10,"iTotalDisplayRecords":100,"InternetDataList":[{"Calls":"320","LevelOneOperators":"1","LevelTwoOperators":"7","Issueraised":"1","SalesDate":"2010-11-25T00:00:00","AutomaticResponses":235}]}
Now,just want to ask that what modifications in JS code do i need to do to parse it in table,as i have searched alot but could'nt get any solution.

Got the answer i need to add following code in js:
$('#internetTable').dataTable({
'bProcessing': true,
'bServerSide': true,
"sServerMethod": "GET",
// to enable Pagination
"sPaginationType": "full_numbers",
'sAjaxSource': 'api/values/GetInternetSales',
"sAjaxDataProp": "InternetDataList",
"aoColumnDefs": [{
"mData": "InternetDataList"
}],
"aoColumns": [
{ "mData": "Calls" },
{ "mData": "LevelOneOperators" },
{ "mData": "LevelTwoOperators" },
{ "mData": "Issueraised" },
{ "mData": "AutomaticResponses" },
{ "mData": "SalesDate" }
]
});
As,here the sAjaxDataProp is your data name as in my case it is InternetDataList and default it is aadata

Datatable render after AJAX call

I am trying to render a data table by making an AJAX call getting some data from controller and then writing data table. sData['id'] is just a number
Here is my code:
$.post('/admin/user_groups_data/' + sData['id']).done(function(data) {
$('#user_groups_table').dataTable({
"bProcessing": true,
"bDeferRender": true,
"sPaginationType": "full_numbers",
"aaData": data, // data here is a JSON object, shows on Firebug correct data and fields
"aoColumns": [
{ "mData": "id"},
{ "mData": "title" },
{ "mData": "category" },
]
});
});
Below is my HTML code
<table id="user_groups_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
</table>
It seems like the data table gets rendered first even before AJAX call is done so it gives me error
DataTables warning (table id = 'user_groups_table'): Requested unknown parameter 'id' from the data source for row 0
I have the .done at top but seems like it doesn't even respect that. Any help would be great. thx

Just added sAjaxSource to it and it works now, seems like the $.post had not completed yet when data table was being written, sAjaxSource retrieves the data and brings it back and then writes data table.
var oTable = $('#user_groups_table').dataTable({
"bDestroy": true,
"bProcessing": true,
"bDeferRender": true,
"sPaginationType": "full_numbers",
//"aaData": data,
"sAjaxSource": '/admin/user_groups_data/' + sData['id'],
"aoColumns": [
{ "mData": "group_id", "bVisible": false},
{ "mData": "title" },
{ "mData": "category" },
]
});