Datatables——一款前台好用的表格插件,本地json模拟数据实现表格分页查询

在做管理后端功能时，经常需要用到表格展现数据，从数据库查询返回的数据，返回集合或者数组到前端，而后前端将数据渲染成表格，方便直观展现数据，通常还需要结合分页、查询、排序。Datatables是一款符合上面所有需求的表格插件，基于jquery，方便我们对表格进行交互操作
Datatables中文网链接

这是一个读取本地json数据渲染表格的示例

使用步骤

一：从官网下载最新版本的插件，并在页面中应用相应的js和css文件,我这里是引用cdn提供的文件

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">    <script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>    <script type="text/javascript" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

二：创立页面绑定表格的插件

<table id="tableList" width="100%" ></table>

三：为元素绑定Datatables，并初始化表格配置项

var table;var classType={        1:'一班',        2:'二班',        3:'三班',        4:'四班',        5:'五班'    }    function createTable() {        table = $('#tableList').DataTable({            "bPaginate" : true,            "sPaginationType" : "full_numbers",            "bStateSave" : true, //能否打开用户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态            "bScrollCollapse" : true, //当显示的数据不足以支撑表格的默认的高度            "bLengthChange" : true, //每页显示的记录数            "bFilter" : false, //搜索栏            "bSort" : true, //能否支持排序功能            "bInfo" : true, //显示表格信息            "bAutoWidth" : true, //自适应宽度            "bJQueryUI" : false,//能否开启主题            "bDestroy" : true,            "bServerSide" : true,//服务器解决分页，默认是false，需要服务器解决，必需true            "sAjaxDataProp" : "aData",//是服务器分页的标志，必需有            "sAjaxSource" : "data.json" ,//服务器请求url,这里请求本地模拟的json数据。            "columns": [                {  "data": "stu_number",                    "title":"序号",                    "width" : "auto",                    "render": function ( data, type, full, meta ) {                        return data;                    }                },                { "data": "name",                    "title":"姓名"                },                {"data":"stu_number",                    "title":"学号"                },                { "data": "age",                    "title":"年龄"                },                {                    "data":"sex",                    "title":"性别",                    "render": function ( data, type, row, meta ) {                        if (data == 1){                            return '男';                        }else{                            return '女';                        }                    }                },                { "data": "birthday",                    "title":"出生年月"                },                { "data": "class",                    "title":"班级",                    "render": function ( data, type, row, meta ) {                        return classType[data];                    }                },                { "data": "class",                    "title":"操作",                    "render": function ( data, type, row, meta ) {                        if(row.class==2){                            return "查看"+row.class+"班学生";                        }else{                            return "查看"+row.class+"班学生";                        }                    }                }            ],            /*处理序号列没法生成的问题*/            "fnDrawCallback": function(){                var api = this.api();                var startIndex = api.context[0]._iDisplayStart;                api.column(0).nodes().each(function(cell, i) {                    cell.innerHTML = startIndex + i + 1;                });            },            /*请求携带参数*/            "fnServerParams":function(aoData){                aoData._rand = Math.random();                aoData.push(                        { "name": "name", "value": '可取页面dom元素如input的value'},                        { "name": "class", "value": '' }                );            }        });    }

四：定义好本地json模拟数据，其中返回字段说明：
sEcho：来自用户端 sEcho 传来的参数，仍旧返回给用户端，用作本地计数
iTotalRecords：实际的条数。对应表格底部数据说明(从 20 条中过滤)
iTotalDisplayRecords：过滤之后，实际的条数。对应表格底部数据说明（共 4 条）
aData：服务器返回的json数据，表格展现的数据源
data.json数据如下

{    "aData":[        {            "name":"菜菜",            "stu_number":20190001,            "age":18,            "sex":2,            "birthday":"2001年12月20日",            "class":1        },        {            "name":"刘菲",            "stu_number":20190002,            "age":18,            "sex":2,            "birthday":"2001年11月20日",            "class":4        },        {            "name":"陈阳",            "stu_number":20190003,            "age":18,            "sex":1,            "birthday":"2001年1月20日",            "class":2        },        {            "name":"黄一鸣",            "stu_number":20190004,            "age":18,            "sex":1,            "birthday":"2001年8月20日",            "class":3        },        {            "name":"程新",            "stu_number":20190005,            "age":18,            "sex":2,            "birthday":"2001年7月20日",            "class":5        }],    "iTotalDisplayRecords":5,    "iTotalRecords":20,    "sEcho":0}

五：页面加载完成，完成表格绑定数据

$(function(){        createTable();    })

效果图如下所示，自带分页，表头可切换排序

附加说明：

一：当我们使用搜索功能时，我们在前面使用了table这个全局变量存放绑定dataTable的绑定，因而在搜索时，我们只要要为搜索的参数赋上我们查询的值就可，即‘fnServerParams’方法传递的参数取实时查询的值，而后调用 draw方法就可：

      function search(){          table.draw();      }

二：通过data()方法返回的长度判断服务器返回渲染后的表格数据能否为空

     if(table.data().length==0){        alert("暂无数据");        return;    }

三：不使用本地模拟数据直接访问java后端的接口请求数据，java代码如下：

    /**     * 查询数据列表     * @param request     * @return     */    @RequestMapping(value = "/studentList", produces = "application/json;charset=UTF-8", method = {RequestMethod.POST,            RequestMethod.GET})    @ResponseBody    public String studentList(HttpServletRequest request) {        try {            /*DataTables 用来生成的信息*/            int sEcho = NumberUtils.toInt(request.getParameter("sEcho"), 0);            /*起始页码，若每页显示10条数据，那么第二页参数iDisplayStart为11*/            int fromRec = NumberUtils.toInt(request.getParameter("iDisplayStart"), 0);           /*每页显示的数据条数，若每页显示10条数据，那么iDisplayLength为10*/            int pageSize = NumberUtils.toInt(request.getParameter("iDisplayLength"), 10);            /*查询参数*/            String name = request.getParameter("name");            /*查询参数*/            int classNum = NumberUtils.toInt(request.getParameter("class"));                  Map<String, Object> param = new HashedMap<String, Object>(4);            param.put("fromRec", fromRec);            param.put("endRec", pageSize);            param.put("name", name);            param.put("classNum", classNum);            List<Student> list = new ArrayList<>();            int count = studentService.queryListCount(param);            if (count > 0) {                list = studentService.queryList(param);            }            Map<String, Object> retMap = new HashMap<>(4);            retMap.put("sEcho", sEcho);            retMap.put("iTotalRecords", count);            retMap.put("iTotalDisplayRecords", count);            retMap.put("aData", CollectionUtils.isEmpty(list) ? new ArrayList<>() : list);            return JSONObject.toJSONString(retMap);        } catch (Exception e) {            e.printStackTrace();        }         Map<String, Object> retMap = new HashMap<>(4);        retMap.put("sEcho", 0);        retMap.put("iTotalRecords", 0);        retMap.put("iTotalDisplayRecords", 0);        retMap.put("aData", new ArrayList<>());        return JSONObject.toJSONString(retMap);    }

原文作者技术博客：https://www.songma.com/u/ac4daaeecdfe
95后前台妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。