一、問題描述
前端需要使用表格來展示數據，找了一些插件，最后確定使用dataTables組件來做。
后端的分頁接口已經寫好了，不能修改。接口需要傳入頁碼(pageNumber)和頁面顯示數據條數(pageSize)，顯示相應的數據。
二、分析
先來分析下分頁實現。
一是后端分頁： 這種情況，請求的數據，后端返回的數據格式都按着官網來編碼，很容易實現，在官網上有示例，不多說明。
二是前端分頁： 前端分頁也是支持的，不過需要一次把所有數據都獲取到才可以。
看到這里，問題來了。由於后端在目前的情況下是更改不了，只能在前端實現。但是，現在 又不滿足前端分頁的條件 ：
一次性獲取所有數據（現在后端數據接口只能返回相應頁碼的數據）。
介於目前的情況，獲取的數據只有一頁，沒有所有的頁碼。
試試能不能 偽裝一下后端分頁的情況，就是開啟后端分頁，在請求之前，將傳入的數據進行重組，在獲取到數據后，將返回的數據按照后端分頁的數據格式組裝一遍。
經過測試，是可以的。
三、實現
通過DataTables配置參數ajax項 實現的
目前最新DataTables的版本是1.10.15版本 ，以下是使用此版本。
DataTables參數ajax接收三種類型的參數：
-
*string： 設置獲取數據的url
-
*object：和 jQuery.ajax 定義類似
-
*function：自定義獲取數據的功能
直接上代碼吧，都有注釋。
前端頁面代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery DataTables插件自定義分頁ajax實現</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://cdn.bootcss.com/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://cdn.bootcss.com/datatables/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="row-fluid">
<h3>JQuery DataTables插件自定義分頁Ajax實現</h3>
<table id="example" class="display table-striped table-bordered table-hover table-condensed" cellspacing="0" width="100%">
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
</tr>
</thead>
</table>
</div>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
//提示信息
var lang = {
"lengthMenu": "每頁 _MENU_ 項",
"processing": "處理中...",
"zeroRecords": "沒有匹配結果",
"info": "當前顯示第 _START_ 到 _END_ 項, 共 _TOTAL_ 項",
"infoEmpty": "暫無數據",
"infoFiltered": "(由 _MAX_ 項結果過濾)", //當使用搜索功能后，表格主要信息出追加的字符
"loadingRecords": "加載中...",
"processing": "處理中...",
"search": "搜索:",
"infoPostFix": "", //追加到所有其他主要信息字符串之后
"url": "",
"emptyTable": "表中數據為空",
"infoThousands": ",",
"paginate": {
"first": "首頁",
"last": "末頁",
"next": "下頁",
"previous": "上頁"
}
};
//初始化表格
var table = $("#example").DataTable({
language: lang, //提示信息
stateSave: true, //狀態保存，再次加載頁面時還原表格狀態
autoWidth: false, //禁用自動調整列寬
stripeClasses: ["odd", "even"], //為奇偶行加上樣式，兼容不支持CSS偽類的場合
processing: true, //隱藏加載提示,自行處理
serverSide: true, //啟用服務器端分頁
searching: false, //禁用原生搜索
orderMulti: false, //啟用多列排序
order: [], //取消默認排序查詢,否則復選框一列會出現小箭頭
deferRender: true, //延遲渲染可以提高Datatables的加載速度
lengthMenu: [
[10, 25, 50, 100, 300, -1],
[10, 25, 50, 100, 300, "所有"]
], //每頁多少項，第一個數組是表示的值，第二個數組用來顯示
renderer: "bootstrap", //渲染樣式：Bootstrap和jquery-ui
pagingType: "simple_numbers", //分頁樣式：simple,simple_numbers,full,full_numbers
scrollY: 300, //表格的固定高
scrollCollapse: true, //開啟滾動條
pageLength: 10, //首次加載的數據條數
columnDefs: [{
targets: 'nosort', //列的樣式名
orderable: false //包含上樣式名‘nosort'的禁止排序
}],
//對應列表表頭字段
columns: [{
"data": "Id"
}, {
"data": "Name"
}, {
"data": "Sex"
}],
ajax: function(data, callback, settings) {
//封裝請求參數
var param = {};
param.limit = data.length; //頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候
param.start = data.start; //開始的記錄序號
param.page = (data.start / data.length) + 1; //當前頁碼
//console.log(param);
//ajax請求數據
$.ajax({
url: "/hello/list",
type: "POST",
cache: false, //禁用緩存
data: param, //傳入組裝的參數
dataType: "json",
contentType: 'application/json;charset=utf-8',
beforeSend: function(request) {
request.setRequestHeader("token", localStorage.token);
},
success: function(result) {
//console.log(result);
//setTimeout僅為測試延遲效果
setTimeout(function() {
//封裝返回數據
var returnData = {};
returnData.draw = data.draw; //這里直接自行返回了draw計數器,應該由后台返回
returnData.recordsTotal = result.total; //返回數據全部記錄
returnData.recordsFiltered = result.total; //后台不實現過濾功能，每次查詢均視作全部結果
returnData.data = result.data; //返回的數據列表
//console.log(returnData);
//調用DataTables提供的callback方法，代表數據已封裝完成並傳回DataTables進行渲染
//此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢
callback(returnData);
}, 200);
}
});
},
});
});
</script>
</body>
</html>
JSON數據格式:
效果圖:
