在处理成千上万数据的时候,从DOM获取数据会变的太慢或者不方便。为了解决这个问题,Datatables的服务端处理功能提供了一种方法,可以让服务器端的数据库引擎完成所有“繁重的工作”,然后Datatables只需要拿到处理好的数据绘制到浏览器上即可。因此,你可以轻松显示包含数百万数据的表。
使用服务端处理时,Datatables将向服务器发出Ajax请求,以获取页面上的信息,绘制表格(比如,分页,排序,搜索等)。Datatables将向服务器发送许多变量,以使其能够执行所需的处理,然后以Datatables所需的格式返回数据。
通过使用
serverSideOption
选项开启服务端处理,并使用
ajaxOption
对其进行配置。关于配置的详细信息,参考下文。
请求参数(Sent parameters)
使用服务端处理向服务器发出请求时,Datatables将发送以下数据,让服务器知道需要哪些数据:
名称 | 类型 | 描述 |
---|---|---|
draw |
integerType
|
绘制计数器。这个是用来确保Ajax从服务器返回的是相对应的(Ajax是异步的,因此返回的顺序是不确定的)。 要求在服务器接收到此参数后再返回(具体看 下面) |
start |
integerType
|
分页第一条数据的起始位置,比如0代表第一条数据。 |
length |
integerType
|
表格在当前绘制显示多少条数据。服务器返回的记录将等于该数目,除非服务器返回的记录数较少。
请注意,也可以为 -1 ,表示应该返回所有的记录(这个和服务器处理的理念有些违背)
|
search[value] |
stringType
|
全局的搜索值。值会应用到每一列( searchable 需要设置为true )
|
search[regex] |
booleanType
|
如果为 true 代表全局搜索的值是作为正则表达式处理,为 false 则不是。
注意:出于性能原因,通常在服务器模式下对于大数据不执行这样的正则表达式,但这在技术上是可行的,由自己决定是否需要这样做。
|
order[i][column] |
integerType
|
那些列需要应用排序。这是对columns 数组的索引引用,并且也会提交到服务端。
|
order[i][dir] |
stringType
|
对应列的排序方向。 desc 降序, asc 升序。
|
columns[i][data] |
stringType
|
columns 绑定的数据源,由
columns.dataOption
定义。
|
columns[i][name] |
stringType
|
columns 的名字,由
columns.nameOption
定义。
|
columns[i][searchable] |
booleanType
|
标记列是否能被搜索,为true 代表可以,否则不可以。
这个是由
columns.searchableOption
选项控制。
|
columns[i][orderable] |
booleanType
|
标记列是否能排序,为 true 代表可以,否则不可以。
这个是由
columns.orderableOption
选项控制。
|
columns[i][search][value] |
stringType
|
特定列应用的搜索值。 |
columns[i][search][regex] |
booleanType
|
特定列的搜索值是否视为正则表达式处理,
如果为 true 代表搜索的值是作为正则表达式处理,为 false 则不是。
与全局搜索一样,出于性能原因,通常在服务器模式下对于大数据不执行这样的正则表达式搜索,
但从技术上讲是可行的,由自己决定是否需要这样做。
|
order[i]
和columns[i]
参数发送到服务器的数组信息:
order[i]
是一个数组,定义要排序的列。即如果数组的长度为1,则执行单列排序,否则执行多列排序。columns[i]
是定义表中所有列的数组。
在上面两个情况下,i
是一个整数,它会有变化以指示数组值。这些数据将会自动以数组的形式提供到后端。
返回数据(Returned data)
一旦Datatables发出了请求,并将上述的参数发送到服务端,它期望返回JSON数据,并设置以下的参数:
名称 | 类型 | 描述 |
---|---|---|
draw |
integerType
|
必要。上面请求参数提到了,Datatables发送请求会带上的 draw 参数,
服务端接收到此参数,然后作为返回数据返回给前端。
这里注意,出于安全的考虑,强烈建议你将此参数转换为整数,而不是纯粹的接收,然后返回给前端。这是
为了防止跨站脚本(XSS)攻击。
|
recordsTotal |
integerType
|
必要。记录总数,没有过滤之前(数据库里表的总记录数) |
recordsFiltered |
integerType
|
必要。过滤后的总记录数(如果有接收到前台的过滤条件,则返回的是过滤后的记录数,而不仅仅是当前页的记录数) |
data |
arrayType
|
必要。要在表中显示的数据。这是一个数据源对象数组,每一个项代表一行,Datatables将使用该数组。
请注意,可以使用
ajaxOption
选项的
ajax.dataSrcOption
属性更改此参数的名称。
|
error |
stringType
|
可选。如果服务端发生了异常,你可以定义一个错误来描述服务器出了问题来通知用户该错误。 如果没有错误,可以不需要此属性。 |
除了上述控制整个表的参数外,Datatables还可以在每行数据源对象上使用以下可选参数,自动给绑定上:
名称 | 类型 | 描述 |
---|---|---|
DT_RowId |
stringType
|
将
trTag
节点的ID属性设置为此值
|
DT_RowClass |
stringType
|
添加这个样式到
trTag
节点上
|
DT_RowData |
objectType
|
使用 jQuery data() 方法把对象数据绑定到行中,方便之后用来取出(比如在一个点击事件)
|
DT_RowAttr |
objectType
|
将对象中包含的数据作为属性添加到
trTag
节点。
对象的键作为属性的键,对象的值作为属性的值。这个是使用
jQuery param() 方法。请注意这个选项
需要 Datatables 1.10.5 或者更新的版本才支持。
|
下面的示例数据,显示了使用这些选项的数据格式。
配置(Configuration)
通过使用
serverSideOption
选项开启Datatables的服务端处理。只需要将其设置为true
,Datatables就可以在服务端模式下运行。你还需要使用
ajaxOption
选项来指定URL,Datatables将从该URL中获取需要显示的数据。因此,最简单的的服务端处理初始化代码如下:
$('#example').DataTable( {
serverSide: true,
ajax: '/data-source'
} );
在上面的例子中,我们将其用作字符串,它指示Datatables使用其默认的设置来发出Ajax请求。但是,你可以通过将
ajaxOption
选项作为对象来指定一些设置。作为对象,
ajaxOption
选项直接映射到jQuery ajax
配置对象,因此可以在jQuery请求中使用的任何选项,也可以与Datatables一起使用!比如,我要发送一个POST的请求:
$('#example').DataTable( {
serverSide: true,
ajax: {
url: '/data-source',
type: 'POST'
}
} );
有关Datatables中可用的Ajax选项的更多信息,请参考
ajaxOption
文档。
旧版(Legacy)
旧版本(1.9-)使用一组不同的参数请求服务器和接收。因此,为Datatables 1.10+
编写的代码将无法与Datatables 1.9-
一起使用。但是,Datatables 1.10+
确实具有针对Datatables1.9-
编写的兼容模式。通过使用旧的sAjaxSource
参数(而不是使用新版的
ajaxOption
参数)触发此兼容模式,或者通过设置$.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"
],
...
]
}
使用数组作为表的数据源的服务端处理返回示例,其中还包含DT_RowId
和DT_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"
},
...
]
}
这里还有更多关于服务端处理的例子。