更改为服务器端处理后,jQuery 数据表分页中断
Posted
技术标签:
【中文标题】更改为服务器端处理后,jQuery 数据表分页中断【英文标题】:jQuery datatables pagination broken after changing to server-side processing 【发布时间】:2012-03-25 10:20:18 【问题描述】:我有一个页面正在初始化一个空数据表,并在从选择中更改 jquery 后使用 $.getJSON() 获取 json 数据。然后使用 .fnAddData 添加到表中。像这样:
oTableDisk = $('#disk_connection_table').dataTable(
"bJQueryUI": true,
"iDisplayLength": 30,
"oLanguage":
"sLengthMenu": tableLength
,
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull)
$(nRow).attr('id', aData[0] + "|<?php echo $this->hostInfo['name']; ?>|<?php echo $this->hostInfo['id']; ?>");
return nRow;
,
"aoColumns": ["bSearchable": false, "bVisible": false, null, null, null, null, null, null]
);
$('#disk_switch').change(function()
$.getJSON('/host/getavailableports?type=disk&switch=' + $('#disk_switch option:selected').val(), function(data)
if(data[0])
data.reverse();
oTableDisk.fnClearTable();
$.each(data, function(index)
//console.log(data[index]);
oTableDisk.fnAddData([data[index]['Item1'],
data[index]['Item2'],
data[index]['Item3'],
data[index]['Item4'],
data[index]['Item5'],
data[index]['Item6'],
data[index]['Item8']]);
);
enableEditable(oTableDisk);
);
);
在我们需要处理超过 500 行信息之前,这一直运行良好,并导致 IE 出现“脚本已变得无响应”错误。
现在,我根本没有初始化一个空数据表,而是在选择菜单发生如下变化时创建一个:
$('#disk_switch').change(function()
oTableDisk = $('#disk_connection_table').dataTable(
"bJQueryUI": true,
"iDisplayLength": 30,
"bProcessing": true,
"bServerSide": true,
"bDestroy": true,
"sAjaxSource": '/host/getavailableports?type=disk&switch=' + $('#disk_switch option:selected').val(),
"aaSorting": [[0, "asc"]],
"oLanguage":
"sLengthMenu": tableLength
,
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull)
$(nRow).attr('id', aData[0] + "|<?php echo $this->hostInfo['name']; ?>|<?php echo $this->hostInfo['id']; ?>");
return nRow;
,
"aoColumns": ["bSearchable": false, "bVisible": false, null, null, null, null, null, null],
"fnDrawCallback": function()
$( oTableDisk.fnGetNodes() ).click( function ()
enableEditable(oTableDisk);
);
);
在重写控制器和模型以支持带有限制、位置和 orderby 参数的查询后,我正在获取数据,并且似乎我的 JSON 对象格式正确。问题是现在我没有分页功能。或排序功能。该表将分页箭头显示为灰色,单击列标题实际上并没有做任何事情。在分页链接上方显示“显示 30 个条目中的 1 到 30 个(从 483 个总条目中过滤)”,这对于查询是正确的。
我认为这与加载页面后加载表格有关,但我不知道如何修复它。
【问题讨论】:
使用浏览器控制台分析返回,应该有一个起点,如果是可靠有效的json,听起来就像服务器每次发送相同的数据 所以事实证明我不需要将其切换到服务器端处理。我通过在数据之后将“false”标志添加到 oTableDisk.fnAddData 函数来修复它。然后在加载数据后调用 oTableDisk.fnDraw 函数。另一种方法是在加载每条数据后重新绘制表格。 【参考方案1】:您的服务器没有发回所需服务器端参数的正确值:
http://datatables.net/usage/server-side
我愿意花 110 美元买它:
iTotalRecords
是绝对记录总数。您可能在此处设置了正确的值。
iTotalDisplayRecords
- 是服务器端过滤后的总记录数。这不仅仅是发回的记录数。 11 美元的赌注是你用你的新控制器把“30”放在这里。
如果您仍然不确定第二个的目的,请记住,可以使用搜索或其他过滤器来减少您的查询。假设我有 500 条记录,其中 250 条包含字符串“Foobar”。如果我搜索“Foobar”并且服务器正确处理了这个过滤器,它应该将我的可用记录缩小到 250。然后服务器端实际上只会发回根据iDisplayStart
和iDisplayLength
请求的记录(这应该由 DT 自动提供)。在您的情况下,服务器会发回听起来好像已经正确发送的 30 条记录。
【讨论】:
不,我说的没错。我认为这与在 DOM 之后加载的表有关。 必须承认,我错过了您重新加载数据集 500 次的部分。 ;-) 我应该更聪明——500 条记录不会破坏或明显减慢客户端 DataTables 的实施。 虽然另一方面,'30' 直接来自 iTotalDisplayRecords ......所以无论如何都发生了一些奇怪的事情。但如果你最终不需要服务器端,我想没有理由去猎鬼! 我确实需要服务器端,并且我确实遇到了同样的行为,我相信我欠你 110 美元,Pettit 先生.非常感谢您!以上是关于更改为服务器端处理后,jQuery 数据表分页中断的主要内容,如果未能解决你的问题,请参考以下文章
使用 jquery 数据表进行服务器端处理,包括分页、过滤和搜索
NSMetadataQuery isUpdating 在可达性更改为无 Swift 4 后中断