如何在 jQuery DataTables 中添加静态列
Posted
技术标签:
【中文标题】如何在 jQuery DataTables 中添加静态列【英文标题】:How to add static column(s) in jQuery DataTables 【发布时间】:2015-08-31 20:53:52 【问题描述】:我正在使用 jQuery DataTables 1.10.7。我绑定了几列。在那几列是静态的,很少是动态的。
所以目前我在 DataTable 中绑定了大约 20 列(静态 + 动态)。现在,我已经绑定到 20 列现在假设如果我绑定 21 列,它会给我类似
的错误DataTables 警告:表 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> </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);
);
【问题讨论】:
我们需要您提供更多信息。这个错误是由你的 ajax 调用触发的吗? 请告诉我们您如何将数据绑定到 DT 显示您如何添加动态列以及您是否重新初始化 dataTable? 是的,我已经更新了我的问题。现在您可以检查了。 请按照错误消息中链接datatables.net/tn/1的建议发布您的JSON响应,为什么会显示“无效的JSON响应”。 【参考方案1】:我终于得到了我的问题的答案。 实际上,我的问题是我绑定到 20 列(包括静态和动态)。直到 20 cols 它工作得很好。但是,一旦我继续尝试在那时再添加一个 col(21th cols),我就遇到了问题。
解决办法是 只需在 DataTable 配置设置中设置以下行
"sServerMethod": "POST",
例如
$("#DataGrid").DataTable(
"iDisplayLength": 10,
"bServerSide": true,
"sDom": 'fltip',
"sAjaxSource": '<%= Url.Action("GetTest") %>',
*"sServerMethod": "POST"*
)
因为 Post Method 的 response 存储容量比 GET Response 要好。 Get 方法有存储响应的限制。
【讨论】:
以上是关于如何在 jQuery DataTables 中添加静态列的主要内容,如果未能解决你的问题,请参考以下文章
dataTables jquery - 如何添加排序图像/图标?
如何删除 jQuery DataTables 插件添加的搜索栏和页脚?
Jquery Datatables 仅在几列的标题中添加搜索过滤器