datatables服務端分頁配置最新教程2018
阿新 • • 發佈：2019-01-30
datatables服務端分頁配置
datatables可以說是個好東西吧，幾行js程式碼就能夠讓你初始化一個表格，很方便，但是要用好還是很困難的，因為配置太多太多了，網上的大多數是一些陳舊的配置，如果datatables更換了這麼多版本，網上很多配置都有一些問題，我這裡也不是datatables的基礎教程，我這裡就談一下服務端分頁怎麼配置，因為我專案中用到了，筆以記之。後之覽者，亦將有感於斯文~
一、必備
引入
<!--引入css--> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> <!--引入JavaScript--> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>主體
<table id="example"class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th><th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> </tbody> </table>js程式碼
$(document).ready(function() { $('#example').DataTable(); } );有這三個部分檔案放到一個html中，你就可以例項化一個表格了，很容易對吧
二、分頁
程式碼
<script type="text/javascript"> var myTable; $(document).ready(function() { myTable = $('#projectTable').DataTable( { "processing": true,//重新整理的那個對話方塊 "serverSide": true,//伺服器端獲取資料 "paging": true,//開啟分頁 lengthMenu: [ //自定義分頁長度 [ 20, 50, 100 ], [ '20 頁', '50 頁', '100頁' ] ], ordering:false, "ajax": { "url": "/api/get_project_list", "type": "POST", "data": function (d) { //刪除多餘請求引數 for(var key in d){ if(key.indexOf("columns")==0||key.indexOf("order")==0||key.indexOf("search")==0){ //以columns開頭的引數刪除 delete d[key]; } } var searchParams= { "retryType":$("#retryType").val(), "departmentCode":$("#departmentCode").val()!=""?$("#departmentCode").val():null, "projectCode":$("#projectCode").val()!=""?$("#projectCode").val():null, "serviceName":$("#serviceName").val()!=""?$("#serviceName").val():null, "csrfmiddlewaretoken":csrftoken }; //附加查詢引數 if(searchParams){ $.extend(d,searchParams); //給d擴充套件引數 } }, "dataType" : "json", "dataFilter": function (json) {//json是伺服器端返回的資料 json = JSON.parse(json); var returnData = {}; returnData.draw = json.data.draw; returnData.recordsTotal = json.data.total;//返回資料全部記錄 returnData.recordsFiltered = json.data.total;//後臺不實現過濾功能，每次查詢均視作全部結果 returnData.data = json.data.retryProjectList;//返回的資料列表 return JSON.stringify(returnData);//這幾個引數都是datatable需要的，必須要 } }, "searching" : false, "columns": [ { "data": "id" }, { "data": "departmentCode" }, { "data": "projectCode" }, { "data": "serviceName" }, { "data": "alertMail" }, { "data": "callbackUrl" }, { "data": "descInfo" }, { "data": "companyId" }, { "data": "retryType" }, { "data": "retryCircle" }, { "data": "createTime" }, { "data": "updateTime" }, { "data": "createUser" }, { "data": "updateUser","defaultContent": ''}, { "data": "validVal" }, { "data": "retryTimes" } ], "oLanguage" : { // 國際化配置 "sProcessing" : "正在獲取資料，請稍後...", "sLengthMenu" : "顯示 _MENU_ 條", "sZeroRecords" : "沒有找到資料", "sInfo" : "從 _START_ 到 _END_ 條記錄 總記錄數為 _TOTAL_ 條", "sInfoEmpty" : "記錄數為0", "sInfoFiltered" : "(全部記錄數 _MAX_ 條)", "sInfoPostFix" : "", "sSearch" : "查詢", "sUrl" : "", "oPaginate" : { "sFirst" : "第一頁", "sPrevious" : "上一頁", "sNext" : "下一頁", "sLast" : "最後一頁" } } }); }); </script>給表格加上自定義列：
{ data: function (data, type, full) { return "<button class=\'btn btn-warning btn-xs\' onclick='updateMyForm("+JSON.stringify(data)+")'>修改</button> <button class=\'btn-xs btn btn-warning\'>詳情</button>"; }, className: "center", defaultContent: '<button class=\'btn btn-warning btn-xs\' onclick="updateMyForm()">修改</button> <button class=\'btn-xs btn btn-warning\'>詳情</button>' }講解
大家按照我這個配置去配置基本可以完成datatables服務端分頁配置，重點需要講解的是dataFilter這個配置必須要，必須要，必須要，服務端分頁要求我們傳遞draw，recordsTotal，recordsFiltered，data 這幾個欄位，請不要寫錯字母，不然分頁就拜拜了，dataFilter 能夠幫你解決這個問題，因為你不能總要求服務端有這幾個欄位吧
注意部分
datatables手動重新整理方法
myTable.ajax.reload(); //myTable是上面我例項化的物件
三、JAVA程式碼
評論裡有小夥伴提到了java裡面怎麼對應，我簡單給些demo
其中請求必須要有這三個引數
private Integer draw;
private Integer length;
private Integer start;返回必須要有這兩個引數
private Long total;
private Integer draw;外層用data包裝，所以我模板裡面的程式碼是data.total data.draw，請往上看
獲取列表的分頁程式碼
Page<Role> carList = PageHelper.offsetPage(req.getStart(), req.getLength()).doSelectPage(() -> roleDao.getRoleByCondition(req));
List<RoleBo> roleBos = new ArrayList<>();
for (Role role : carList) {
RoleBo roleBo = new RoleBo();
BeanUtils.copyProperties(role,roleBo);
roleBos.add(roleBo);
}
roleListResp.setDraw(req.getDraw());
roleListResp.setTotal(carList.getTotal());
roleListResp.setRoleList(roleBos);可以看出是用pageHelper的offsetPage做的。不懂的留言或者加群
Over，也是給自己做個筆記吧~