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;
  }

 目前這篇文章還沒有做一個搜索的功能，后面在補一篇。