官网:http://www.datatables.net/
中文网:http://dt.thxopen.com/
问题:在处理太多dom数据或者ajax一次性把数据获得后,datatables表现不是很满意。原因使一次性获得数据后,浏览器需要渲染数据,创建tr,所以数据越多,速度就越慢。为了解决这个问题,datatables提供了服务器模式,把本来客户端所做的事情交给服务器去处理,比如排序、分页、过滤。对于客户端来说这些操作都是比较消耗资源的。
当我们开启服务器模式的时侯,每次绘制表格的时侯,datatables会给服务器发送一个请求(包括当前分页、排序、搜索等)。datatables会向服务器发送大量的变量去执行所需要的处理,然后在服务器拼好相应的数据返回给datatables。
开启服务器端模式需要设置serverSide为true,并且配置ajax。
下面介绍一下主要的配置选项:
发送参数:
draw——number类型——请求次数计数器,每次发送给服务器后原封返回,因为请求是异步的,为了确保每次请求都能对应到服务器返回到的数据。
start——number类型——第一条数据的起始位置,当前数据集的开始点(0为基数)。
length——当前页面要显示的数据条数
search——全局的搜索条件,针对于那些searchable设置为true的列。
返回的数据:
draw——number类型——请求计数器,客户端发送的draw是多少,服务器就返回多少。出于安全的考虑,强烈建议将draw转换为整数后再返回,而不是纯粹的接受然后返回,这是为了防止跨站点脚本攻击(XSS)。
recordsTotal——number类型——未经过过滤的数据记录数(数据库里总共有多少条记录)。
recordsFiltered——number类型——过滤后的总的记录数,是所有数据经过过滤筛选后的数量,而不仅仅是当前页面要显示的数据数量。
data——Array类型——要展示在表格中的数据,可以是一个对象数组,也可以是一个纯数组。区别在于,如果是纯数组的话,前端就不需要用columns绑定数据,会自动按照顺序去显示,每个数组中的数据就是一行;如果是对象数组,前端则需要使用columns绑定数据才能正常显示。
ajax接收三种类型的参数:一种是string,用来设置获取数据的url,一种是对象(和jQuery.ajax对象的定义类似),还有一种是函数,用于自定义获取数据的功能。
$('#table').DataTable({
ajax : '/xx/yy/data.json',
})
$('#table').DataTable({
'ajax' : function(data,callback,settings){
callback(
JSON.parse(localStorage.getItem('dataTablesData'));
);
}
})
$('#table').dataTable({
'ajax':{
'url' : 'datasearch.json',
'data':{
'user_id' : 451,
}
}
});
上面的ajax对象其实是参考的jQuery中的ajax对象,这样用起来就比较熟悉。 但是要注意的是,ajax.data有两种数据类型,一种是对象object,还是一种是函数function。
当ajax.data是一个对象时,ajax.data用于扩展datatables构造内部对象,将额外的,静态的参数传递给服务器,相当于是对原有请求参数对象的一种扩展extention。
$('#example').dataTable({
"ajax" : {
"url" : "data.json",
"data" : { ?//能添加一些额外的静态参数给后台
"user_id" : 123,
"app_id": 111
}
}
});
当ajax.data是一个函数时,data.ajax选项可以用于修改由datatables内部构造的原始数据或者完全取代这些数据,然后把自定义的请求数据ajax发送到服务器,在每次datatables请求服务器的时侯都可以动态计算提交的参数。具体有以下两种操作方法:
//通过操作请求数据对象d
$('#example').dataTable({
"ajax" : {
"url" : "data.json",
"data" : function(d){ ?//这个‘d’就是未扩充前的请求数据对象
d.extra_search = $('#extra').val();
}
}
});
//通过返回一个对象来改变请求中的数据对象
$('#example').dataTable({
"ajax" : {
"url" : "data.json",
"data" : function(d){
return $.extend({},d,{
"extra_search" : $('#extra').val();
});
}
}
});
//以JSON格式提交请求
$('#example').dataTable({
"ajax" : {
"url" : "data.json",
"data" : function(d){
return JSON.stringify(d);
}
}
});
联系客服