I am using jQuery DataTables 1.10.7. I have binded few columns. In that few columns are static and few are dynamic.
So currently I have binded around 20 columns (static + dynamic) in DataTable. Now, I have binded till to 20 cols now suppose if I am binding 21 cols it's gives me error like
DataTables warning: table id=DataGrid - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
Please attached screenshots. In first snapshot it's working till on hand columns and next screenshots will display error while I am binding next column of OnHand.
I have set this part too in my DataTable.
"aoColumns": [
{ sWidth: '1%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' },
{ sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' },
{ sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' },
{ sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }
],
Here my code like this
function OnddlRegionRankGroupChange(val) {
var Tblheader = '';
var trHTML = '';
Re_Bind_DataTable();
$("#DataGrid").empty()
Tblheader = '<thead><tr><th rowspan="2" style="width: 5%;">Excl.</th><th rowspan="2">CUC</th> <th rowspan="2"> Late Model </th><th colspan="2">' + '1 Year Rank </th><th colspan="2"> 1 Year Sales Qty </th> <th rowspan="2"> Whse Looksup </th><th colspan="12" align="center"> Qty of Parts Sold by Mo.' +
'</th> <th rowspan="2"> Days OOS </th> <th rowspan="2"> On Hand </th> <th colspan="4" align="center"> Re-Order High </th> <%--<th> </th>--%> ' +
'</tr> <tr> <th> Whse </th> <th> Region </th><th> Whse </th> <th>Region</th><th> 12 </th> <th>11</th> <%--<th> .... </th>--%> <th class="cellhidden"> ' +
'10 </th> <th class="cellhidden">9 </th> <th class="cellhidden"> 8 </th> <th class="cellhidden"> 7 </th> <th class="cellhidden"> 6 </th>' +
'<th class="cellhidden"> 5 </th> <th class="cellhidden">4 </th> <th> 3</th> <th>2 </th> <th> 1 </th> <th> Current </th> <th> Diff </th> <th>' +
' Recomd </th> <th> Last </th> <%--<th> </th>--%> </tr> </thead>';
$("#DataGrid").append(Tblheader);
$('#DataGrid').DataTable({
"iDisplayLength": 25,
"aaSorting": [[0, 'desc']],
"bServerSide": true,
"bProcessing": false,
"bPaginate": true,
"sDom": 'fltip',
"bDeferRender": true,
"sAjaxSource": '<%= Url.Action("GetTest") %>',
"fnServerParams": function (aoData) {
aoData.push({ "name": "WhseID", "value": $("#ddlWarehouse").val() },
{ "name": "strCatg", "value": $("#ddlCategory").val() })
},
"aoColumns": [
{ sWidth: '1%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' },
{ sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' },
{ sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' },
{ sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }
],
"fnInitComplete": function (oSettings, json) {
setTimeout(function () { $.loader('close'); }, 1000);
}
});
}
Finally I got answer of my question. Actually, My problem was I had bind till 20 cols(including static and dynamic). Till 20 cols it was working very well. But once I go ahead and try to add one more col(21th cols) at that time, I was facing issue.
Solution is Just need to set below line in DataTable config setting
"sServerMethod": "POST",
e.g
$("#DataGrid").DataTable({
"iDisplayLength": 10,
"bServerSide": true,
"sDom": 'fltip',
"sAjaxSource": '<%= Url.Action("GetTest") %>',
*"sServerMethod": "POST"*
})
Because Post Method storing capacity of response is better than GET Response. Get Method having limitation of storing response.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With