datatables异步AJAX的简易用法

dataTables对表格数据处理非常方便，但是有时将大量数据直接加载到前端页面就会造成页面访问十分不流畅，所以可以考虑使用异步加载数据。
这个在官网也有详细的说明：戳这

dataTables AJAX请求后端数据非常简单，只要在初始化时设置 serverSide: true 即开启后端处理数据。

如下是初始化dataTables的代码：

 　　var dataTables = $("#table_id").dataTable({
            processing: true,
            serverSide: true, //开启后端模式
            ajax : {
                //请求数据的URL
                url:'http://localhost:802/datatables/ajax.php?XDEBUG_SESSION=PHPSTORM',
                //后端返回中哪个字段是数据
                dataSrc: "data",
                //你也可以自己指定返回的数据中的字段
                // dataFilter: function(data){
                //     var json = jQuery.parseJSON( data );
                //     json.recordsTotal = json.total;
                //     json.recordsFiltered = json.total;
                //     json.data = json.list;
                //     return JSON.stringify(json);
                // }
            },
            //告诉datatables数据中对应的列
            columns: [
                { "data": "name" },
                { "data": "num" }
            ],
            paging: true,//开启分页
            ordering: true,//开启排序
            searching: true,//开启搜索
            iDisplayLength : 50,//默认长度
            language: lang //语言 这里我把提出来了，在最下面完整代码
 　　});

现在你的前端表格只要有数据请求就会向你的URL发出请求，下图是后端接收的请求参数：

后端根据前端的要求去数据库中得到数据，这里要注意的是你不能完全相信前端传来的值，比如用户在搜索中输入一条SQL语句到后端，然后你直接把用户搜索的值合成一条SQL去执行，这样就会产生意想不到的事情。

好了，你从数据库中得到值后整理成对应的JSON数据输出到前端。dataTables就会根据JSON数据更新表格，如下是返回的JSON：

{
    "data": [
                {
                    "name": "Bob",
                    "num": "16"
                },
                {
                    "name": "Tom",
                    "num": "46"
                }
            ],
    "status": true,
    "recordsTotal": 100000,
    "recordsFiltered": 100000
}

recordsTotal是数据的总条数，recordsFiltered是数据过滤后的条数,data是实际的返回数据。如果你的JSON字段需要改变在初始化时将你的设置传入构造函数即可。

条件搜索
当然有时候你需要根据一些条件来搜索，比如搜索一个时间范围或者一个什么用户输入的条件。
你只需要将要搜索的值传入并触发搜索就可以了。

例如下面代码是点击了按钮后,将用户要搜索的值传到后端。

        $('#submit').on('click',function () { //当id为submit的按钮被点击了
　　　　　　　　 //取到两个输入框中的值
            var min = $('#minValue').val();
            var max = $('#maxValue').val();
　　　　　　　　 //合成后传入到后端
            dataTables.api().search(min+'-'+max).draw();
        });

延时搜索
一般这样dataTables简单的AJAX请求就完成了，但是要注意的是这样的方法前端每次改变都会触发后端查询数据库，会增加后端服务器的压力。
你也可以在初始化时设置：searchDelay: 400 这个意思是每次用户在搜索框中输入后延时400ms后再去请求后端从而降低服务器压力，默认即为400ms。

例子
下面是完整的初始化部分代码：

    var lang =  {
        lengthMenu: '<select class="form-control">' +
        '<option value="50">50</option>' +
        '<option value="100">100</option>' +
        '<option value="300">300</option>' +
        '<option value="500">500</option>' +
        '<option value="800">800</option>' +
        '<option value="1000">1000</option>' +
        '</select>',
        search: '<span>表格搜索：</span>',
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        zeroRecords: "<span>没有内容</span>",
        info: "<span>总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 </span>",
        infoEmpty: "<span>0条记录</span>",
    };

    $(function () {
        var dataTables = $("#table_id").dataTable({
            processing: true,
            serverSide: true, //开启后端模式
            ajax : {
                //请求数据的URL
                url:'http://localhost:802/datatables/ajax.php?XDEBUG_SESSION=PHPSTORM',
                //后端返回中哪个字段是数据
                dataSrc: "data",
                //你也可以自己指定返回的数据中字段的名
                // dataFilter: function(data){
                //     var json = jQuery.parseJSON( data );
                //     json.recordsTotal = json.total;
                //     json.recordsFiltered = json.total;
                //     json.data = json.list;
                //     return JSON.stringify(json);
                // }
            },
            //告诉datatables数据中对应的列
            columns: [
                { "data": "name" },
                { "data": "num" }
            ],
            paging: true,//开启分页
            ordering: true,//开启排序
            searching: true,//开启搜索
            iDisplayLength : 50,//默认长度
            language: lang //语言
        });


        $('#submit').on('click',function () {
            var min = $('#minValue').val();
            var max = $('#maxValue').val();
            dataTables.api().search(min+'-'+max).draw();
        });

    });