datatable后端分页（实例）

本来也没去注意这个后端分页，看了很多帖子，怕后面吃不开，所以我就把他改成后端分页。百度吧，想说找个直接改改就行，看了很多真心蛋疼。

这个人写的很不错 https://blog.csdn.net/hy840429/article/details/5626878 但是服务端为啥他要返回数组，我就不懂了，我懒得在for循环再转

废话这么多了，开始撸代码

页面jsp

<table class="table table-border table-bordered table-hover table-bg" id="group_list">
            <thead>
            <tr class="text-c">
                <th width="80">名称</th>
                <th width="100">库大小</th>
                <th width="80">创建时间</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

页面js

 var oTable;
    $(function () {
        oTable = $('#group_list').DataTable({
            "aaSorting": [[2, "desc"]],//默认第几个排序
            "bStateSave": true,//状态保存
            "serverSide": true,  //启用服务器端分页
            "searching":false,
            "aoColumnDefs": [
                {"orderable": false, "aTargets": [0, 1]}// 制定列不参与排序
            ],
            "sAjaxSource": "xx/dataGrid.json",
//            "fnServerParams": function ( aoData ) {
//                aoData.push({"groupId":"1"}); 
//            },
            "sPaginationType": "full_numbers",      //翻页界面类型
            "oLanguage": {                          //汉化
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "没有检索到数据",
                "sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",
                "sInfoEmtpy": "没有数据",
                "sProcessing": "正在加载数据...",
                "oPaginate": {
                    "sFirst": "首页",
//                    "sPrevious": "前页",（注释这2个。页面就会显示上一页 下一页）
//                    "sNext": "后页",
                    "sLast": "尾页"
                }
            },
            "fnServerData": function ( sSource, aoData, fnCallback) {
//                aoData.push({"groupId":"1"});
               $.ajax( {
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                } );
            },
            //列表表头字段
            "columns": [
                {"mData": "name"},
                {"mData": "size"},
                {"mData": "createTime"},

            ]
        });
    });

后端代码

 @RequestMapping(value = "dataGrid", method = RequestMethod.POST)
  @ResponseBody
  public Object dataGrid(
     Student student, HttpServletRequest request)
      throws Exception {
    Page pageInfo = new PageData().requestToPage(request);
    Page<Student > page = studentService.findPage(pageInfo, student);
    return returnResult(request, page);
  }

pageData是我封装的一个类（iDisplayStart,iDisplayLength)

/**
 * @author baozi
 * @title
 * @date 2018/4/3 12:01
 * @description
 */
public class PageData {
  public PageData() {}


  public Page requestToPage(HttpServletRequest request) {
    String iDisplayStart = request.getParameter("iDisplayStart");
    String iDisplayLength = request.getParameter("iDisplayLength");

    Page page = new Page();
    if (StringUtils.isNotEmpty(iDisplayStart)) {
      page.setPageNo(Integer.parseInt(iDisplayStart));
    }
    if (StringUtils.isNotEmpty(iDisplayLength)) {
      page.setPageSize(Integer.parseInt(iDisplayLength));
    }
    return page;
  }
}

由于回显也是一堆重复代码，所以也提取了（sEcho我就放在这，因为没啥用，只是要返回回去，看到有些帖子+1 ，不懂，反正我没+1也没出现啥问题。可能说目前我没发现，后期有问题，我在修改文章）

 protected Map<String,Object> returnResult(HttpServletRequest request, Page page){
    Map<String, Object> result = new HashMap<>();
    String sEcho = request.getParameter("sEcho");
    result.put("data", page.getList());
    result.put("sEcho", sEcho);
    result.put("iTotalRecords", page.getTotalPage());
    result.put("iTotalDisplayRecords", page.getCount());
    return result;
  }

 目前这篇文章还没有做一个搜索的功能，后面在补一篇。