Html：
<table class="table table-striped table-bordered table-hover table-condensed" id="ou-table"> <thead> <tr> <th>序号</th> <th>名称</th> <th>部门领导</th> <th>标识</th> <th>上级组织</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table>js：
$('#ou-table').dataTable({ "processing": true, "serverSide": true,//启用服务器端分页 "destroy": true, "pageLength": 10, "ordering": false, // "renderer": "bootstrap",//渲染样式：Bootstrap和jquery-ui "pagingType": "simple_numbers",//分页样式：simple,simple_numbers,full,full_numbers "autoWidth": true, "stateSave": true,//保持翻页状态，和comTable.fnDraw(false);结合使用 "searching": true,//datatables默认搜索 "ajax": { "url": "/ou/getOus", "type": 'POST', "data": function (d) { var param = {}; param.draw = d.draw; param.start = d.start; param.length = d.length; param.search=d.search.value; param.ou=ou; return param;//自定义需要传递的参数。 }, "dataSrc": function (str) { var data; if (typeof str === 'object') { data = str; } else { data = eval("(" + str + ")"); } var datas=data.data; for(var i=0,l=datas.length;i<l;i++){ if(!datas[i].hasOwnProperty("managedBy")){ datas[i].managedBy=""; } } return str.data; } }, "columns": [ {"data": null}, {"data": "name"}, {"data": "managedBy"}, {"data": "uid", "visible": false}, {"data": "pid"}, {"data": null} ], columnDefs: [ { targets: 0, defaultContent: "<input type='checkbox' name='checkList'>" }, { targets: -1, defaultContent: "<div class='btn-group'>"+ "<button id='oueditRow' class='btn btn-primary btn-sm' type='button'><i class='glyphicon glyphicon-user'></i></button>"+ "<button id='oudelRow' class='btn btn-primary btn-sm' type='button'><i class='glyphicon glyphicon-edit'></i></button>"+ "</div>" } ], //在每次table被draw完后调用 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; }) }, "language": { "lengthMenu": "每页 _MENU_ 条记录", "processing": "数据加载中...", "paginate": { "previous": "上一页", "next": "下一页" }, "zeroRecords": "没有找到符合条件的数据", // "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )", "info": "当前显示第 _START_ 到 _END_ 项, 共 _TOTAL_ 项", "infoEmpty": "无记录", "infoFiltered": "(从 _MAX_ 条记录过滤)", "search": "搜索：" } }); 后台： @RequestMapping(value="/getOus",produces = "text/json;charset=UTF-8") @ResponseBody public JSONObject getOus(HttpServletRequest request, QueryCondition query){ System.out.println(query.toString()); List<OU> ous=ouService.getOuByQuery(query); DatatablesView<OU> dataTable=new DatatablesView<>(); dataTable.setDraw(query.getDraw()); dataTable.setRecordsFiltered(ouService.getOuSize(query)); dataTable.setRecordsTotal(ouService.getOuSize(query)); dataTable.setData(ous); // String data = JSON.toJSONString(dataTable); // System.out.println(data.toString()); JSONObject data=(JSONObject)JSON.toJSON(dataTable); System.out.println(data.toString()); return data; } public class DatatablesView<T> { private List<T> data; //data 与datatales 加载的“dataSrc"对应 private int recordsTotal; private int recordsFiltered; private int draw; public DatatablesView() { }recordsTotal、recordsFiltered、draw必须返回给前台,query是前台自定义的参数，当然可以通过request获取datatables默认的参数
出现过下面这种情况，是后台返回的是string，前台接收后解析格式不对，后来改成后台返回json解决
如果出现页码只有一页实际有多页的问题，recordsTotal、recordsFiltered参数值应该是总的查询条数，而非过滤的条数
返回前台的数据格式
{"recordsFiltered":15,"data":[ {"uid":"","name":"拆迁管理中心","pid":"","managedBy":""}, {"uid":"","name":"审计监察中心","pid":","managedBy":""}, {"uid":"","name":"立项及专规申报中心","pid":"","managedBy":""}, {"uid":"","name":"测试部1","pid":"","managedBy":""}, {"uid":"","name":"测试部2","pid":"","managedBy":""} ],"draw":4,"recordsTotal":15}