jQuery DataTables iDisplayLength 不起作用。我该如何解决？

Posted 2023-05-09

【中文标题】jQuery DataTables iDisplayLength 不起作用。我该如何解决？

【英文标题】：jQuery DataTables iDisplayLength not working. How do I fix this?

【发布时间】：2019-12-26 21:54:21

【问题描述】：

我正在尝试从 mysql 数据库中获取大量数据。因此我不希望用户一次获取所有数据，因为这可能会破坏数据库服务器。然而，当我设置 jQuery Datatable 选项时，它似乎不受我设置的 DisplayLength 的影响。当我更改要显示的项目数量时，底部的框和分页确实发生了变化，但数据保持不变。

我尝试在列的 和 处添加一个不可见的字段，这在过去似乎有所帮助。对于这个问题，它没有。

$.post("index.php?action=getDataStructurePropsFromSensorId", 
                sensorId        : sensorId
                                                , function(data) 
                dataProps.push( "mDataProp": "data_entry_id" );
                data.forEach(function (item, i) 
                    var th = i;

                    $('#data-th-'+th).html(item['struct_property_label']);

                    $('.data-th').each(function () 
                        if ($(this).html() == '') 
                            $(this).hide();
                         else 
                            $(this).show();
                        
                    );
                    dataProps.push( "mDataProp": "data_value_"+i.toString(), "bSortable": false,"bSearchable": false);
                );
                dataProps.push( "mDataProp": "data_entry_created_at", "bSortable": false, "bSearchable": false );
                dataProps.push( "mDataProp": "data_entry_id", "bVisible": false );

                var obj2 = 
                "bStateSave": true,
                "bProcessing": true,
                "bRetrieve": true,
                "bServerSide": true,
                "sAjaxSource": "index.php?&action=getSensorData&sensor_id="+sensorId+"&from="+from+"&till="+till,
                "iDisplayLength": 5,
                "aLengthMenu": [[5, 10, 25, 50, 100, 200], [5, 10, 25, 50, 100, 200]],
                "aoColumns": dataProps,
                "fnRowCallback": function( nRow, aaData, iDisplayIndex ) 
                return nRow;
                ,
                "aaSorting": [[0, 'asc']],
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "fnInitComplete": function (oSettings, json) 
                ,
                "fnDrawCallback": function () 
                
            ;

            oDataTableOverview = $('#sensor_data_dt').dataTable(obj2);
            , "json");

我预计有 5 条记录，具体取决于页面和分页量框中的选择。有谁知道为什么我要获取所有数据而不是 5 条记录？

【问题讨论】：

当您尝试使用 iDisplayLength=5 手动请求时，您是否只能检索到 5 条记录？

pageLength 选项不会以任何方式影响加载的数据量，它设置每页显示的记录数。如果您尝试为大量数据减少服务器和客户端的负载，那么您一直在追求server-side processing。

@YevgenGorbunkov 正如您在代码中看到的那样，“bServerSide”设置为 true。这与“sAjaxSource”相结合，应将 DataTables 配置为使用服务器端处理。 “iDisplayLength”应该设置服务器返回的记录数量。然而，当我获得所有记录时，这似乎被忽略了。

正如所说，pageLength 有nothing 要做，无论要加载的数据块的大小如何。如果您已经使用服务器端处理，则应尝试从 ajax.data 选项中操作 length 属性。

我后来尝试这样做，但它似乎也不起作用。我确实设法最终使这个工作。我只是从输入数据中手动获取 iDisplayLength 和 iDisplayStart 并将其用于查询数据。这个功能是 DataTables 应该自己处理的。我仍然不明白为什么它在我的情况下没有，但我很高兴它现在正在工作。

【参考方案1】：

您使用的是哪个数据表版本？对于 1.10 及以上版本的数据表，请使用“pageLength”而不是“iDisplayLength”

$('#example').dataTable( 
  "pageLength": 5
 );

【讨论】：

我使用的是 1.10.9 版数据表。我试过你的建议，但没有奏效。问题是这确实适用于我的其他表。