使用 jQuery 数据表插件的服务器端分页

Question

如何使用数据 table 实现服务器端分页？目前，在加载页面时，我正在初始化数据 table 并通过 Java Spring 控制器使用来自数据库的数据 (JSON) 填充 table。我通过在查询字符串中传递搜索条件来进行 Ajax 调用。由于我们有数十万条记录，我们计划进行服务器端分页以提高性能。

为此，后端服务开发人员为我提供了一项服务，该服务为我提供了每页记录，但接受了诸如 页码、页数记录、排序顺序、列排序之类的输入 .

我必须覆盖数据 table 实现以通过 Ajax 请求查询字符串将这些传递给服务。我不知道是否有办法实现这一目标。

Answer 1

How can I achieve server side pagination using data table?

有关详细信息，请查看 documentation

$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
    } );
} );

我建议你再看看docs。

When making a request to the server using server-side processing, DataTables will send the following data in order to let the server know what data is required I would not copy all the parameters but only few of them here:

start, length, order[i][column]

我想这些就是你想要的。

记住：

Once DataTables has made a request for data, with the above parameters sent to the server, it expects JSON data to be returned to it, with the following parameters set:

并且您想自己查看属性，以免 post 太长。

Answer 2

即用型代码：只需按要求使用即可

    $("#myTable1").DataTable({
        "oLanguage": {
            "sSearch": "Search Address:"
        },
        "iDisplayLength": 50,
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false, // for disable multiple column at once
        "ajax": {
            "url": url,
            "type": "POST",
            "datatype": "json"
        },
        "columns": [
                { "data": "ProviderName", "name": "ProviderName", "autoWidth": true },
                { "data": "ProviderName", "name": "ProviderName", "autoWidth": true },
                { "data": "cpTitle", "name": "cpTitle", "autoWidth": true },
                { "data": "cpAddress", "name": "cpAddress", "autoWidth": true },
                { "data": "cpPriceHourly", "name": "cpPriceHourly", "autoWidth": true },
                { "data": "cpCreatedDate", "name": "cpCreatedDate", "autoWidth": true },
                { "data": "cpId", "name": "cpId", "autoWidth": true }
        ],

        "columnDefs": [{
            "targets": 0,
            "data": null,
            "render": function (data, type, full, meta) {
                cnt++;
                if (cnt != 0) {
                    $("#divExcel").show();
                }
                   return meta.settings._iDisplayStart + meta.row + 1;
                }
           }]

    });

使用 jQuery 数据表插件的服务器端分页

Server Side Pagination with jQuery Data Tables plugin

jquery

spring-mvc

datatables