基于dataTables的服务端分页与表格

前言：

• 公司开发后台管理系统，表格加分页并带有搜索条件特别多。同事给我发来dataTables的demo，我感觉我就发现新天地，研究了几天。所以写出了这篇文章，作为备忘录，同时也给大家一个参考。

demo图

步入正题：

1. 首先要引入两个必要的文件,当然是要先引入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中下载必要的文件，路径是你自己文件所在地，下载地址自己百度，这个不会我也没办法了

2. HTML相应代码

 <div class="list list_two">
                        <form id="form_z_a" class="form_z_a">
                                    <select id="typename">
                                        <option value="name">姓名</option>
                                        <option value="no">工号</option>
                                    </select>
                                    <input style="width: 160px;" id="typevalue" type="text" placeholder="">
                                    <label>员工状态</label>
                                    <select name="status" id="status">
                                        
                                    </select>
                                    <label>员工帐号</label>
                                    <select name="hasAccount" id="hasAccount">
                                        <option value="">全部</option>
                                        <option value="true">已开通</option>
                                        <option value="false">未开通</option>
                                    </select>
                                    <label>证书状态</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>工号</th>
                                                <th>姓名</th>
                                                <th>所属部门</th>
                                                <th>职位</th>
                                                <th>手机号码</th>
                                                <th>证书即将过期数</th>
                                                <th>证书过期数</th>
                                                <th>员工状态</th>
                                                <th>员工账户</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                        </table>
                    </div>
<!--重点是你需要一个table标签容器，并把表头写好，给上id（重点）和class，样式什么的都可以自己看官网api-->

3. 初始化表格，这时候你定义的table标签的id就有用了。

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

初始化表中有很多的配置项；我把服务端分页需要的配置贴出来，加以说明。

var table = $('#example').DataTable({
        dom: 'frtip', //表格上的功能。如分页和搜索还有条数显示。我去掉了选择条数和搜索的功能。具体看官网api
        "bFilter": false, //去掉搜索。和上面一样的效果。去掉单个功能可用。

        serverSide: true,//启用服务器端分页，这是重点重点重点。三遍

        //服务端分页少不了ajax请求，这是datatables封装好的。
        ajax: function(data, callback, settings) {
            //封装请求参数
            // var data_url = 'http://localhost:3000/suppliers';
            var data_url = '/basic/hospitals/' + ownerUSCC + '/suppliers';

            var searchData = getFormJson('form_z_a', 'typename', 'typevalue');
            //这是把form表单中的值转为对象函数的方法。
            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;
            }
            //因为后台说分页条数和分页的页数要放在请求头中所以我把这个参数放在请求头中，你们后台要是部需要的话，可以直接当ajax的data参数传给后台。
            var param = {
                "x-page-size": data.length,
                "x-page-no": (data.start / data.length) + 1
            };
            console.log("fen:" + param);
            // param.x- = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
            // param.start = data.start;//开始的记录序号
            // param.x = (data.start / data.length)+1;//当前页码
            //ajax请求数据
            $.ajax({
                type: "GET",
                url: data_url,
                cache: false,//禁用缓存
                data: searchData,//传入组装的参数
                dataType: "json",
                headers: param,//请求头参数
                complete: function(result) {
                    console.log(searchData);
                    console.log(this.headers);
                    console.log(result.getResponseHeader("x-total-count"));
                },
                success: function(result, status, xhr) {
                    //setTimeout仅为测试延迟效果
                    setTimeout(function() {
                        //封装返回数据
                        var returnData = {};
                        returnData.draw = data.draw; //这里直接自行返回了draw计数器,应该由后台返回

                        returnData.recordsTotal = xhr.getResponseHeader("x-total-count");
                        returnData.recordsFiltered = xhr.getResponseHeader("x-total-count"); //后台不实现过滤功能，每次查询均视作全部结果

                        // returnData.recordsTotal = result.length;//返回数据全部记录
                        // returnData.recordsFiltered = result.length;
                        returnData.data = result; //返回的数据列表
                        //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                        //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                        callback(returnData);//将你的返回的data转为datatables能识别的数据格式作为参数返回ajax的callback回调中。
                    }, 200);
                }
            });
        },
        //"columns"属性是数据配置，你返回data中的数据写入这个数据对象中如：data：key（就是你返回数据中的key）
        //defaultContent:知道当data为空时默认显示的数据
        "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 当columns中设置data为null，你就可以在表格中加入一些如按钮等自定义html：
        //自定义的按钮可以写在defaultContent中或者render();回调函数中,必须要有return值。
        //targets : 从表格列数的索引 从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_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },

    });

4. 搜索功能

• 点击搜索，datatables提供table.ajax.reload();方法刷新表格。因为你已经选择一些搜索条件。所以刷新表格时候能自动把搜索条件带上。搜索条件的获取一定要在ajax回调中获取。不然刷新表格不会带上条件，这点很重要。

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

结语：

第一次写文章，所以我把代码都贴了出来，大家多看我代码注释，希望大家有个参考。
么么哒！