JQuery DataTable 詳解

之前博主介紹過一種submit局部刷新的辦法，但是單單對於table刷新而去綁定form提交顯得太過冗重麻煩，今天介紹下jquery dataTable自帶的插件fnReloadAjax實現ajax異步請求刷新表格數據的方法。

前提準備：導入fnReloadAjax.js，附上下載鏈接
https://pan.baidu.com/s/1qYRMX9i

第一：實現的效果就是根據查詢條件點擊查詢按鈕刷新表格數

1、查詢按鈕

<button onclick="queryStation()">查詢</button>

2、初始化表格

$("#stationTable").DataTable({
                //表格基本配置，根據自己需求設置
                "paging" : true,
                "lengthChange" : true,
                "searching" : false,
                "ordering" : false,
                "info" : true,
                "autoWidth" : false,
                "bStateSave" : true,
                "bFilter" : true,
                "oLanguage" : {
                    "sUrl" : "plugins/datatables/lang_zh.txt",
                },
                //刷新數據的重點，請求數據源
                ajax : {
                    //地址
                    url : "queryStationWithCityCode",
                    type : "POST",
                    dataType : "json",
                    contentType : "application/x-www-form-urlencoded; charset=UTF-8",
                    error : function(data,e){
                        alert("系統繁忙，請稍後重試！");
                    },
                    //此處不需要寫ajax的success回調
                },
                //請求回數據，對錶格列進行賦值（此處每一列都需賦值）
                "columns": [  
                    { "data": "cityName","targets": -1},  
                    { "data": "townName","targets": -2 },  
                    { "data": "name","targets": -3 },  
                    { "data": "address" ,"targets": -4},  
                    { "data": "contacts","targets":-5 },
                    { "data": "phone","targets":-6 },
                    { "data": "holidayFlag","targets":-7 },
                    { "data": "periodFlag","targets":-8 },
                    { "data": "id","targets":-9 },
                    { "data": "id","targets":-9 },
                ], 
                //自定義列數據
                "columnDefs": [  
                    {  
                       "render": function ( data, type, 
                row ) { 
                        //data爲當前列的數據
                        //type爲當前列數據類型
                        //row爲當前行數據
                        var rowData=JSON.stringify(row); 
                        var str = "<a class='herf='javascript:void(0)' οnclick='changeModal("+rowData+")'>聯繫人</a>";
                            return str;
                            //此處return可自己定義，博主此處舉例爲超鏈接，傳參須注意，若傳字符串需加上轉義字符，否則會報錯ReferenceError: XXX is not defined at HTMLAnchorElement.onclick
                        }, 
                        //此處target負數表示從右向左的順序
                        //-1爲右側第一列 
                        "targets": -1 
                   },
                   {  
                       "render": function ( data, type, row ) { 
                            var str =JSON.stringify(row);
                            return "<a class='herf='#' οnclick='deleteModal("+str+")'>刪除</a>";
                        },  
                        "targets": -2
                   },
                 ],
                "createdRow": function ( row, data, index ) {  
                    //創建行之後的操作
                },
            });

3、查詢觸發點擊事件，刷新表格數據

<script type="text/javascript">
        //查詢
        function queryStation(){
            var cityCode = $("#sel_town").val();
            var parentCode = $("#sel_city").val();
            var table = $("#stationTable").dataTable();
            //清除表格數據
            table.fnClearTable();
            //重新請求數據（不寫參數代表請求初始化時的默認接口數據）
          table.fnReloadAjax("queryStationWithCityCode?cityCode="+cityCode+"&parentCode="+parentCode);
        }
    </script>