jquery datatable组件 官方文档 之 服务器处理(Server-side processing)

http://datatables.club/manual/server-side.html

 

服务器处理(Server-side processing)

• 什么是服务器模式？
• DT自动请求的参数
• 服务器需要返回的数据
• 如何开启服务器模式？
• 服务器模式示例数据格式

什么是服务器模式？

是不是发现在处理太多 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天生支持以上参数的解析，自动转为数组，好不公平啊

 

名称	类型	描述
draw	integerJS	绘制计数器。这个是用来确保Ajax从服务器返回的是对应的（Ajax是异步的，因此返回的顺序是不确定的）。 要求在服务器接收到此参数后再返回（具体看 下面）
start	integerJS	第一条数据的起始位置，比如0代表第一条数据
length	integerJS	告诉服务器每页显示的条数，这个数字会等于返回的 data集合的记录数，可能会大于因为服务器可能没有那么多数据。这个也可能是-1，代表需要返回全部数据(尽管这个和服务器处理的理念有点违背)
search[value]	stringJS	全局的搜索条件，条件会应用到每一列（ searchable需要设置为 true ）
search[regex]	booleanJS	如果为 true代表全局搜索的值是作为正则表达式处理，为 false则不是。 注意：通常在服务器模式下对于大数据不执行这样的正则表达式，但这都是自己决定的
order[i][column]	integerJS	告诉后台那些列是需要排序的。 i是一个数组索引，对应的是 columns配置的数组，从0开始
order[i][dir]	stringJS	告诉后台列排序的方式， desc 降序 asc升序
columns[i][data]	stringJS	columns 绑定的数据源，由 columns.dataOption 定义。
columns[i][name]	stringJS	columns 的名字，由 columns.nameOption 定义。
columns[i][searchable]	booleanJS	标记列是否能被搜索,为true代表可以，否则不可以，这个是由 columns.searchableOption 控制
columns[i][orderable]	booleanJS	标记列是否能排序,为 true代表可以，否则不可以，这个是由 columns.orderableOption 控制
columns[i][search][value]	stringJS	标记具体列的搜索条件
columns[i][search][regex]	booleanJS	特定列的搜索条件是否视为正则表达式， 如果为 true代表搜索的值是作为正则表达式处理，为 false则不是。 注意：通常在服务器模式下对于大数据不执行这样的正则表达式，但这都是自己决定的

order[i]和 columns[i]参数发送到服务器是数组信息：

• order[i] - 是一个数组，定义了多少列要被排序。比如，数组长度为1，那么就 只有一个列被排序，否则就是多个列被排序
• columns[i] - 是一个数组，定了这个表格里所有的列

在这两个情况下， iis an integer which will change to indicate the array value. In most modern server-side scripting environments this data will automatically be available to you as an array.

 

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

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

名称	类型	描述
draw	integerJS	必要。上面提到了，Datatables发送的draw是多少那么服务器就返回多少。 这里注意，作者出于安全的考虑，强烈要求把这个转换为整形，即数字后再返回，而不是纯粹的接受然后返回，这是 为了防止跨站脚本（XSS）攻击。
recordsTotal	integerJS	必要。即没有过滤的记录数（数据库里总共记录数）
recordsFiltered	integerJS	必要。过滤后的记录数（如果有接收到前台的过滤条件，则返回的是过滤后的记录数）
data	arrayType	必要。表中中需要显示的数据。这是一个对象数组，也可以只是数组，区别在于 纯数组前台就不需要用 columns绑定数据，会自动按照顺序去显示 ，而对象数组则需要使用 columns绑定数据才能正常显示。 注意这个 data的名称可以由 ajaxOption ajax不定时一讲 的 ajax.dataSrcOption ajax.dataSrc 1不定时一讲 ajax.dataSrc 2不定时一讲 控制
error	stringJS	可选。你可以定义一个错误来描述服务器出了问题后的友好提示

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

名称	类型	描述
DT_RowId	stringJS	自动绑定到 tr节点上
DT_RowClass	stringJS	自动把这个类名添加到 tr
DT_RowData	objectJS	使用 jQuery.data() 方法把数据绑定到row中，方便之后用来检索（比如加入一个点击事件）
DT_RowAttr	objectJS	自动绑定数据到 tr上，使用 jQuery.attr() 方法，对象的键用作属性，值用作属性的值。注意这个 需要 Datatables 1.10.5+的版本才支持

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

如何开启服务器模式（Configuration）

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

所以最简单的服务器模式DT初始化代码如下所示：

1 2 3 4 5 6

$('#example').DataTable( {    //开启服务器模式     serverSide: true,    //数据来源（包括处理分页，排序，过滤） ，即url，action，接口，等等     ajax: '/data-source' } );

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

比如我要 DataTables 以post方式发送的请求，代码如下

1 2 3 4 5 6 7

$('#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）

服务器模式处理的例子，返回数组作为数据源 ， 完整例子

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

{     "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"         ],         ...     ] }

服务器模式例子，返回对象数组作为数据源 ， 完整例子

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

{     "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_RowId 和 DT_RowData（完整例子 ）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

{     "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