如何在jQuery DataTables中添加静态列

Question

我正在使用jQuery DataTables 1.10.7.我列了几列.因为少数列是静态的,很少是动态的.

所以目前我在DataTable中绑定了大约20列(静态+动态).现在,我已经绑定到20列,现在假设我绑定了21列,它给了我错误

DataTables警告:table id = DataGrid - 无效的JSON响应.有关此错误的更多信息,请参阅http://datatables.net/tn/1

请附上截图.在第一个快照中,它一直工作到手头列,下一个屏幕截图将显示错误,而我正在绑定OnHand的下一列.

我在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%' }
 ],

我的代码在这里

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

终于我得到了我的问题的答案。实际上，我的问题是我已经绑定了20列（包括静态和动态）。直到 20 cols 为止，效果都很好。但是，一旦我继续尝试当时再添加一列（第 21 列），我就遇到了问题。

解决方案是 只需要在 DataTable 配置设置中设置以下行

"sServerMethod": "POST",

例如

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

因为Post方法存储响应的能力比GET响应要好。Get 方法具有存储响应的限制。