DataTables的服务器端分页处理

前端代码如下：

$.fn.dataTable.ext.errMode = function(){
    alert("呃,貌似遇到了一点问题!");//更改获取数据异常的提示
}

var table =  $("#sample").dataTable({
    info:true,
    lengthChange:false,
    ordering:false,
    paging:true, //启用分页
    processing:true,
    searching:false,
    serverSide:true,//开启使用服务器端数据
    pageLength:10,//定义每页记录数
    columns:[//定义对应的每列数据，注意html里的table必须有<thead><tbody>
        {data:"name"},
        {data:"role"},
        {data:"id"}
    ],
    ajax:{//通过ajax获取服务器数据
        url:"",
        dataSrc:function(json){//我返回的数据格式｛"list":""｝,如果不写这个默认会获取{"data":""}
            return json.list;
        },
        type:"POST",
        data:function(d){//ajax请求发送到服务器端的参数，服务器端可以request.getParameter("roleName")获取
            d.roleName = $("#roleName").val();
        },

    },
    columnDefs:[//这个比较有用，是获取数据后，你自己渲染对应列的内容，比如我把id列渲染成超链接
        {targets:2,render: function ( data, type, full, meta ) {
             return '<a href="${ctx}/sys/role/edit?id='+data+'">操作</a>&nbsp;&nbsp;<a href="${ctx}/sys/role/delRoleById/'+data+'">删除</a>';
            }
        }
    ],
    language:{//更改默认的提示信息
        zeroRecords:    "没有符合条件的数据",
        info:           "从 _START_ 到 _END_ 条,共 _TOTAL_ 数据",
        infoEmpty:      "",
        processing:"查询中……"
    }
})

//如果更改了roleName提供个查询按钮，可以这么写
$("#search_btn").click(function(){
     table.api().ajax.reload();
})

服务器端代码：

采用springmvc
@RequestMapping("/getRoleList")
@ResponseBody
public JSON getRoleList(@RequestParam("roleName") String roleName,
                        HttpServletRequest req, HttpServletResponse resp)
{
    //start,length,draw是datatables传递的时候默认自带的,无需设置
    //start,length 就是mysql里的 limit start,length
    Integer start = Integer.parseInt(req.getParameter("start"));
    Integer length = Integer.parseInt(req.getParameter("length"));
    Integer draw = Integer.parseInt(req.getParameter("draw"));//当前页数
    SysRole sysRole = new SysRole();
    if(!StringUtils.isEmpty(roleName)){
        sysRole.setName(roleName);
    }

    List<SysRole> list = sysRoleService.findListPage(sysRole,start,length);
    long count = sysRoleService.findListPageCount(sysRole);

    //必须设置返回值 recordsTotal,recordsFiltered,draw
    JSONObject json = new JSONObject();
    json.put("list",list);
    json.put("recordsTotal",count);
    json.put("recordsFiltered",count);
    json.put("draw",draw);
    return json;
}

OK,大功告成。

注：自己做的时候最困惑的问题在于ajax怎么向后台传递当前页数，起始条数，多看了几遍官方文档，才发现是datatables自己默认传递的，瞬间心好累

转载于:https://my.oschina.net/u/2256193/blog/646359