How to add static columns in jQuery DataTables

Question

I am using jQuery DataTables 1.10.7. I anchored a few columns. In this case, several columns are static, and some of them are dynamic.

So, currently I have bound about 20 columns (static + dynamic) in a DataTable. Now, I have tied up to 20 decks, now suppose if I bind 21 posts, it gives me an error, for example

Warning DataTables: table id = DataGrid - Invalid JSON response. For more information about this error see http://datatables.net/tn/1

Please attach screenshots. In the first shot, it works until the columns and the following screenshots on the hand display an error, while I am linking the next OnHand column.

I also installed this part 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 i like my code

 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> &nbsp; </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> &nbsp; </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); } }); } 

Answer 1

Finally, I got an answer to my question. In fact, my problem was that I had snapping up to 20 ears (including static and dynamic). Up to 20 ears, it worked very well. But as soon as I go ahead and try to add another col (21st cols) at that time, I run into a problem.

Solution You just need to set the line below in the DataTable configuration setting

"sServerMethod": "POST",

eg

  $("#DataGrid").DataTable({ "iDisplayLength": 10, "bServerSide": true, "sDom": 'fltip', "sAjaxSource": '<%= Url.Action("GetTest") %>', *"sServerMethod": "POST"* }) 

Because the Post method retains the ability to respond better than GET Response. The Get method has a restriction on saving the response.