前言：

• 公司開發(fā)后臺(tái)管理系統(tǒng)，表格加分頁并帶有搜索條件特別多。同事給我發(fā)來dataTables的demo，我感覺我就發(fā)現(xiàn)新天地，研究了幾天。所以寫出了這篇文章，作為備忘錄，同時(shí)也給大家一個(gè)參考。

demo圖

步入正題：

1. 首先要引入兩個(gè)必要的文件,當(dāng)然是要先引入jquery；

<link rel="stylesheet"  type="text/css" href="../../../css/jquery.dataTables.min.css"> 
<script src="../../js/Plug/jquery.dataTables.min.js" type="text/javascript" charset="utf-8"></script>
//在dataTables中下載必要的文件，路徑是你自己文件所在地，下載地址自己百度，這個(gè)不會(huì)我也沒辦法了

2. HTML相應(yīng)代碼

 <div class="list list_two">
                        <form id="form_z_a" class="form_z_a">
                                    <select id="typename">
                                        <option value="name">姓名</option>
                                        <option value="no">工號(hào)</option>
                                    </select>
                                    <input style="width: 160px;" id="typevalue" type="text" placeholder="">
                                    <label>員工狀態(tài)</label>
                                    <select name="status" id="status">
                                        
                                    </select>
                                    <label>員工帳號(hào)</label>
                                    <select name="hasAccount" id="hasAccount">
                                        <option value="">全部</option>
                                        <option value="true">已開通</option>
                                        <option value="false">未開通</option>
                                    </select>
                                    <label>證書狀態(tài)</label>
                                    <select name="certificatesStatus" id="certificatesStatus">
                                        
                                    </select>
                                    <button type="button" id="btn-z-a">搜索</button>
                        </form>
                        <table id="example" class="display" cellspacing="0" width="100%">
                                        <thead>
                                            <tr>
                                                <th>工號(hào)</th>
                                                <th>姓名</th>
                                                <th>所屬部門</th>
                                                <th>職位</th>
                                                <th>手機(jī)號(hào)碼</th>
                                                <th>證書即將過期數(shù)</th>
                                                <th>證書過期數(shù)</th>
                                                <th>員工狀態(tài)</th>
                                                <th>員工賬戶</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                        </table>
                    </div>
<!--重點(diǎn)是你需要一個(gè)table標(biāo)簽容器，并把表頭寫好，給上id（重點(diǎn)）和class，樣式什么的都可以自己看官網(wǎng)api-->

3. 初始化表格，這時(shí)候你定義的table標(biāo)簽的id就有用了。

 $(document).ready(function(){
    $('#example').DataTable();
});

初始化表中有很多的配置項(xiàng)；我把服務(wù)端分頁需要的配置貼出來，加以說明。

var table = $('#example').DataTable({
        dom: 'frtip', //表格上的功能。如分頁和搜索還有條數(shù)顯示。我去掉了選擇條數(shù)和搜索的功能。具體看官網(wǎng)api
        "bFilter": false, //去掉搜索。和上面一樣的效果。去掉單個(gè)功能可用。

        serverSide: true,//啟用服務(wù)器端分頁，這是重點(diǎn)重點(diǎn)重點(diǎn)。三遍

        //服務(wù)端分頁少不了ajax請(qǐng)求，這是datatables封裝好的。
        ajax: function(data, callback, settings) {
            //封裝請(qǐng)求參數(shù)
            // var data_url = 'http://localhost:3000/suppliers';
            var data_url = '/basic/hospitals/' + ownerUSCC + '/suppliers';

            var searchData = getFormJson('form_z_a', 'typename', 'typevalue');
            //這是把form表單中的值轉(zhuǎn)為對(duì)象函數(shù)的方法。
            function getFormJson(idF, idS, idI) {
                // 下拉+輸入搜索的查詢條件,傳入form的id,下拉框的name和input的name
                var searchData = {};
                var loginForm = $('#' + idF).serializeArray();
                $.each(loginForm, function(i, v) {
                    searchData[v.name] = v.value;
                });
                var typename = $('#' + idS).val();
                var typevalue = $('#' + idI).val();
                searchData[typename] = typevalue;
                return searchData;
            }
            //因?yàn)楹笈_(tái)說分頁條數(shù)和分頁的頁數(shù)要放在請(qǐng)求頭中所以我把這個(gè)參數(shù)放在請(qǐng)求頭中，你們后臺(tái)要是部需要的話，可以直接當(dāng)ajax的data參數(shù)傳給后臺(tái)。
            var param = {
                "x-page-size": data.length,
                "x-page-no": (data.start / data.length) + 1
            };
            console.log("fen:" + param);
            // param.x- = data.length;//頁面顯示記錄條數(shù)，在頁面顯示每頁顯示多少項(xiàng)的時(shí)候
            // param.start = data.start;//開始的記錄序號(hào)
            // param.x = (data.start / data.length)+1;//當(dāng)前頁碼
            //ajax請(qǐng)求數(shù)據(jù)
            $.ajax({
                type: "GET",
                url: data_url,
                cache: false,//禁用緩存
                data: searchData,//傳入組裝的參數(shù)
                dataType: "json",
                headers: param,//請(qǐng)求頭參數(shù)
                complete: function(result) {
                    console.log(searchData);
                    console.log(this.headers);
                    console.log(result.getResponseHeader("x-total-count"));
                },
                success: function(result, status, xhr) {
                    //setTimeout僅為測(cè)試延遲效果
                    setTimeout(function() {
                        //封裝返回?cái)?shù)據(jù)
                        var returnData = {};
                        returnData.draw = data.draw; //這里直接自行返回了draw計(jì)數(shù)器,應(yīng)該由后臺(tái)返回

                        returnData.recordsTotal = xhr.getResponseHeader("x-total-count");
                        returnData.recordsFiltered = xhr.getResponseHeader("x-total-count"); //后臺(tái)不實(shí)現(xiàn)過濾功能，每次查詢均視作全部結(jié)果

                        // returnData.recordsTotal = result.length;//返回?cái)?shù)據(jù)全部記錄
                        // returnData.recordsFiltered = result.length;
                        returnData.data = result; //返回的數(shù)據(jù)列表
                        //調(diào)用DataTables提供的callback方法，代表數(shù)據(jù)已封裝完成并傳回DataTables進(jìn)行渲染
                        //此時(shí)的數(shù)據(jù)需確保正確無誤，異常判斷應(yīng)在執(zhí)行此回調(diào)前自行處理完畢
                        callback(returnData);//將你的返回的data轉(zhuǎn)為datatables能識(shí)別的數(shù)據(jù)格式作為參數(shù)返回ajax的callback回調(diào)中。
                    }, 200);
                }
            });
        },
        //"columns"屬性是數(shù)據(jù)配置，你返回data中的數(shù)據(jù)寫入這個(gè)數(shù)據(jù)對(duì)象中如：data：key（就是你返回?cái)?shù)據(jù)中的key）
        //defaultContent:知道當(dāng)data為空時(shí)默認(rèn)顯示的數(shù)據(jù)
        "columns": [{
            "data": "fullName",
            "defaultContent": "<i></i>"
        },

        {
            "data": "simpleName",
            "defaultContent": "<i></i>"
        }, {
            "data": null
        },
        {
            "data": "contact.name",
            "defaultContent": "<i></i>"

        }, {
            "data": "contact.tel",
            "defaultContent": "<i></i>"
        }, {
            "data": "contact.email",
            "defaultContent": "<i></i>"
        }],
        //columnDefs 當(dāng)columns中設(shè)置data為null，你就可以在表格中加入一些如按鈕等自定義html：
        //自定義的按鈕可以寫在defaultContent中或者render();回調(diào)函數(shù)中,必須要有return值。
        //targets : 從表格列數(shù)的索引 從0開始
        columnDefs: [{
            "targets": 6,
             "data": null,
             "defaultContent": '<div class="zhgl_cc_n">' + '![](../../../images/chakan.png)' + '![](../../../images/remove_z.png)' + '</div>'        
        }, {           
             "targets": 2,
             "data": null,
            "render": function(data, type, full, meta) {
                var _category = JSON.parse(data.category);
                // console.log(_category);
                var _category_data = '';
                for (var i in _category) {
                    // _category_data+=_category[i]+','
                    // console.log(_category[i])
                    for (var j in _category[i]) {
                        // console.log(_category[i][j])
                        if (i > 0) {
                            _category_data += ' , ' + _category[i][j];
                        } else {
                            _category_data += _category[i][j];
                        }

                    }
                }
                return _category_data;
            },
            "defaultContent": "<i>無</i>"        
        }],
        //國際化，把所有的字改變成中文
        language: {
            "sProcessing": "處理中...",
            "sLengthMenu": "顯示 _MENU_ 項(xiàng)結(jié)果",
            "sZeroRecords": "沒有匹配結(jié)果",
            "sInfo": "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)",
            "sInfoEmpty": "顯示第 0 至 0 項(xiàng)結(jié)果，共 0 項(xiàng)",
            "sInfoFiltered": "(由 _MAX_ 項(xiàng)結(jié)果過濾)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中數(shù)據(jù)為空",
            "sLoadingRecords": "載入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首頁",
                "sPrevious": "上頁",
                "sNext": "下頁",
                "sLast": "末頁"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },

    });

4. 搜索功能

• 點(diǎn)擊搜索，datatables提供table.ajax.reload();方法刷新表格。因?yàn)槟阋呀?jīng)選擇一些搜索條件。所以刷新表格時(shí)候能自動(dòng)把搜索條件帶上。搜索條件的獲取一定要在ajax回調(diào)中獲取。不然刷新表格不會(huì)帶上條件，這點(diǎn)很重要。

  $('#btn-z-a').on('click', function() {
        table.ajax.reload();
        console.log('搜索');
        return false;
    });

結(jié)語：

第一次寫文章，所以我把代碼都貼了出來，大家多看我代碼注釋，希望大家有個(gè)參考。
么么噠！