javascript - 更改为服务器端处理后，jQuery 数据表分页中断

Question

我有一个页面正在初始化一个空数据表，并在从 select 进行 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);
                } );
            }

        });

重写 Controller 和模型以支持带有 limit、where 和 orderby 参数的查询后，我正在取回数据，而且我的 JSON 对象似乎格式正确。问题是现在我没有分页功能。或排序功能。该表将分页箭头显示为灰色，单击列标题实际上没有任何作用。在分页链接上方，它显示“显示 30 个条目中的 1 到 30 个(从 483 个条目中过滤)”，这对于查询是正确的。

我认为这与在页面加载后加载表格有关，但我不知道如何解决。

Answer 1

您的服务器只是没有为所需的服务器端参数发回正确的值:

http://datatables.net/usage/server-side

我愿意为它在这里付出十一美元:

iTotalRecords 是记录的绝对总数。您可能在此处设置了正确的值。

iTotalDisplayRecords - 是服务器端过滤后的记录总数。这不仅仅是被发回的记录数。十一美元的赌注是你用新 Controller 在这里输入“30”。

如果您仍然不确定第二个的目的，请记住可以使用搜索或其他过滤器来减少您的查询。假设我有 500 条记录，其中 250 条记录中包含字符串“Foobar”。如果我搜索“Foobar”并且服务器正确处理了这个过滤器，它应该将我的可用记录缩小到 250。然后服务器端实际上只会发回根据 iDisplayStart 和 iDisplayLength(应该由 DT 自动提供)。在您的情况下，服务器会发回 30 条记录，听起来好像已经正确发送了。