datatables——数据的服务器端处理

官网：http://www./

中文网：http://dt./

问题：在处理太多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'));
    );
  }
})

当ajax属性是一个函数时，我们可以完全自己控制ajax请求，返回的数据都可以不受datatables的影响。事实上你可以使用非ajax，比如说直接使用本地存储。你可以直接从本地存储中获取数据然后交给callback处理。

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

        }

    }

});