Datatables(1.10以上版本)服务器端分页(Java)

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}