服务器处理(Server-side processing)

什么是服务器模式?

是不是发现在处理太多 DOM 数据或者 AJAX 一次性把数据获得后,DataTables 表现的不是很满意?这是肯定的, 因为 DT 需要渲染,创建 tr/td ,所以数据越多,速度就越慢。 为了解决这个问题 DataTables 提供了 服务器模式,把本来客户端所做的事情交给服务器去处理, 比如排序(order)、分页(paging)、过滤(filter)。对于客户端来说这些操作都是比较消耗资源的, 所以打开服务器模式后不用担心这些操作会影响到用户体验。

当你打开服务器模式的时候,每次绘制表格的时候,DataTables 会给服务器发送一个请求(包括当前分页,排序,搜索参数等等)。DataTables 会向 服务器发送 一些参数 去执行所需要的处理,然后在服务器组装好 相应的数据 返回给 DataTables。

开启服务器模式需要使用 serverSideOption ajaxOption ajax不定时一讲 选项,进一步的信息,请参考下面的 配置选项

DT自动请求的参数(Sent parameters)

当开启了 服务器模式时,DataTables 会发送如下参数到服务器

ps:需要说明的是

  • 如果你是 Java 开发者,那么使用struts2的需要注意,会有错误抛出,因为处理不了类似 columns[i][search][regex]的变量
  • 如果是你 .net 开发者,那么可能会遇到 maxQueryStringLength 的错误
  • 如果是你 php 开发者,那么恭喜你,php天生支持以上参数的解析,自动转为数组,好不公平啊

服务器需要返回的数据(Returned data)

一旦 DataTables 发送了请求,上面的参数就会传送给服务器,那么你需要接受到这些参数并做相应的逻辑处理然后按照下面的格式讲组装好的JSON数据返回 (不是每个参数都需要接受处理,根据自己的业务需要)

除了上面的返回参数以外你还可以加入下面的参数,来实现对表格数据的自动绑定

如何使用上面的参数,参考下面展示的 数据示例

如何开启服务器模式(Configuration)

使用服务器模式需要启用 serverSideOption 选项 , 设置为 true,并且配置 ajaxOption ajax不定时一讲 设置url,告诉 DataTables 该 从那里获得数据

所以最简单的服务器模式DT初始化代码如下所示:
$('#example').DataTable( {
   //开启服务器模式
    serverSide: true,
   //数据来源(包括处理分页,排序,过滤) ,即url,action,接口,等等
    ajax: '/data-source'
} );
                      

ajaxOption ajax不定时一讲 可以直接接受一个字符串也可以作为一个对象使用。作为对象他就像 jQuery.ajax 配置一样

比如我要 DataTables 以post方式发送的请求,代码如下
$('#example').DataTable( {
    serverSide: true,
    ajax: {
        url: '/data-source',
        type: 'POST'
    }
} );
                      

在 DataTables 中的 ajax选项配置详细参考 ajaxOption ajax不定时一讲

老版(Legacy)

1.9-版中发送给服务器的参数和 1.10+的有所不同。但是Datatables为1.9-的脚本做了兼容模式, 你可以使用高版本的js兼容低版本的写法,但是反过来则不行。 旧的是使用 sAjaxSource 而新的是使用 ajaxOption ajax不定时一讲 或者通过设置 0.fn.dataTable.ext.legacy.ajax = true;

1.9版本服务器操作的文档看请 参考这里

服务器模式示例数据格式(Example data)

服务器模式处理的例子,返回数组作为数据源 , 完整例子
{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        [
            "Angelica",
            "Ramos",
            "System Architect",
            "London",
            "9th Oct 09",
            "$2,875"
        ],
        [
            "Ashton",
            "Cox",
            "Technical Author",
            "San Francisco",
            "12th Jan 09",
            "$4,800"
        ],
        ...
    ]
}                 
服务器模式例子,返回对象数组作为数据源 , 完整例子
{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        {
            "name":"Angelica",
            "age":"Ramos",
            "office":"System Architect",
            "address":"London",
            "date":"9th Oct 09",
            "salary":"$2,875"
        },
        {
            "name":"Ashton",
            "age":"Cox",
            "office":"Technical Author",
            "address":"San Francisco",
            "date":"12th Jan 09",
            "salary":"$4,800"
        },
        ...
    ]
}                 
服务器模式例子,返回使用对象还包括DT_RowIdDT_RowData完整例子
{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        {
            "DT_RowId": "row_3",
            "DT_RowData": {
                "pkey": 3
            },
            "first_name": "Angelica",
            "last_name": "Ramos",
            "position": "System Architect",
            "office": "London",
            "start_date": "9th Oct 09",
            "salary": "$2,875"
        },
        {
            "DT_RowId": "row_17",
            "DT_RowData": {
                "pkey": 17
            },
            "first_name": "Ashton",
            "last_name": "Cox",
            "position": "Technical Author",
            "office": "San Francisco",
            "start_date": "12th Jan 09",
            "salary": "$4,800"
        },
        ...
    ]
}    

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

Translation from DataTables.net, with permission