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();
        });

    });