在做管理后台功能时，经常需要用到表格展示数据，从数据库查询返回的数据，返回集合或数组到前台，然后前台将数据渲染成表格，方便直观展示数据，通常还需要结合分页、查询、排序。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})@ResponseBodypublic 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.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。