前言
昨天在博客園的博問上幫一位園友解決了一個問題复局，我覺得有必要記錄一下菜谣，萬一有人也遇上了呢锣夹。
問題描述
園友是做前端的，產(chǎn)品經(jīng)理要求他使用jQuery DataTables插件顯示一個列表解取，要實現(xiàn)分類效果。
后端的分頁接口已經(jīng)寫好了返顺，不涉及條件查詢禀苦，需要傳入頁碼(pageNo)和頁面顯示數(shù)據(jù)條數(shù)(pageSize)，顯示相應(yīng)頁的顯示記錄遂鹊，且不能修改后端接口振乏。
分析
先來分析下分頁實現(xiàn)。
一是后端分頁：這種情況下秉扑，在后端很容易實現(xiàn)慧邮，在官網(wǎng)上有示例，不多說明舟陆。
二是前端分頁：前端分頁也是支持的误澳，不過需要一次把所有數(shù)據(jù)都獲取到才可以。
看到這里吨娜，問題來了脓匿。由于后端在目前的情況下是更改不了，只能在前端實現(xiàn)宦赠。但是陪毡，現(xiàn)在又不滿足前端分頁的條件：一次性獲取所有數(shù)據(jù)（現(xiàn)在后端數(shù)據(jù)接口只能返回相應(yīng)頁碼的數(shù)據(jù)）。
介于目前的情況勾扭，獲取的數(shù)據(jù)只有一頁毡琉，沒有所有的頁碼。
試試能不能偽裝一下后端分頁的情況妙色，就是開啟后端分頁桅滋，在請求之前，將傳入的數(shù)據(jù)進行重組，在獲取到數(shù)據(jù)后丐谋，將返回的數(shù)據(jù)按照后端分頁的數(shù)據(jù)格式組裝一遍芍碧。
經(jīng)過測試，是可以的号俐。
實現(xiàn)
通過DataTables配置參數(shù)ajax項實現(xiàn)的泌豆。關(guān)于ajax詳細介紹請看官方說明：中文 | 英文
ajax接收三種類型的參數(shù)：
- string： 設(shè)置獲取數(shù)據(jù)的url
- object：和 jQuery.ajax 定義類似
- function：自定義獲取數(shù)據(jù)的功能
直接上代碼吧，都有注釋吏饿。
前端頁面代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery DataTables插件自定義分頁ajax實現(xiàn)</title>
<link rel="stylesheet" media="screen">
<link rel="stylesheet" media="screen">
<link rel="stylesheet" media="screen">
</head>
<body>
<div class="row-fluid">
<h3>JQuery DataTables插件自定義分頁Ajax實現(xiàn)</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>
<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 = {
"sProcessing": "處理中...",
"sLengthMenu": "每頁 _MENU_ 項",
"sZeroRecords": "沒有匹配結(jié)果",
"sInfo": "當(dāng)前顯示第 _START_ 至 _END_ 項踪危，共 _TOTAL_ 項。",
"sInfoEmpty": "當(dāng)前顯示第 0 至 0 項猪落，共 0 項",
"sInfoFiltered": "(由 _MAX_ 項結(jié)果過濾)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中數(shù)據(jù)為空",
"sLoadingRecords": "載入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上頁",
"sNext": "下頁",
"sLast": "末頁",
"sJump": "跳轉(zhuǎn)"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
};
//初始化表格
var table = $("#example").dataTable({
language:lang, //提示信息
autoWidth: false, //禁用自動調(diào)整列寬
stripeClasses: ["odd", "even"], //為奇偶行加上樣式贞远，兼容不支持CSS偽類的場合
processing: true, //隱藏加載提示,自行處理
serverSide: true, //啟用服務(wù)器端分頁
searching: false, //禁用原生搜索
orderMulti: false, //啟用多列排序
order: [], //取消默認排序查詢,否則復(fù)選框一列會出現(xiàn)小箭頭
renderer: "bootstrap", //渲染樣式：Bootstrap和jquery-ui
pagingType: "simple_numbers", //分頁樣式：simple,simple_numbers,full,full_numbers
columnDefs: [{
"targets": 'nosort', //列的樣式名
"orderable": false //包含上樣式名‘nosort’的禁止排序
}],
ajax: function (data, callback, settings) {
//封裝請求參數(shù)
var param = {};
param.limit = data.length;//頁面顯示記錄條數(shù)，在頁面顯示每頁顯示多少項的時候
param.start = data.start;//開始的記錄序號
param.page = (data.start / data.length)+1;//當(dāng)前頁碼
//console.log(param);
//ajax請求數(shù)據(jù)
$.ajax({
type: "GET",
url: "/hello/list",
cache: false, //禁用緩存
data: param, //傳入組裝的參數(shù)
dataType: "json",
success: function (result) {
//console.log(result);
//setTimeout僅為測試延遲效果
setTimeout(function () {
//封裝返回數(shù)據(jù)
var returnData = {};
returnData.draw = data.draw;//這里直接自行返回了draw計數(shù)器,應(yīng)該由后臺返回
returnData.recordsTotal = result.total;//返回數(shù)據(jù)全部記錄
returnData.recordsFiltered = result.total;//后臺不實現(xiàn)過濾功能笨忌，每次查詢均視作全部結(jié)果
returnData.data = result.data;//返回的數(shù)據(jù)列表
//console.log(returnData);
//調(diào)用DataTables提供的callback方法蓝仲，代表數(shù)據(jù)已封裝完成并傳回DataTables進行渲染
//此時的數(shù)據(jù)需確保正確無誤，異常判斷應(yīng)在執(zhí)行此回調(diào)前自行處理完畢
callback(returnData);
}, 200);
}
});
},
//列表表頭字段
columns: [
{ "data": "Id" },
{ "data": "Name" },
{ "data": "Sex" }
]
}).api();
//此處需調(diào)用api()方法,否則返回的是JQuery對象而不是DataTables的API對象
});
</script>
</body>
</html>
JSON數(shù)據(jù)格式:
效果圖:
本文就介紹到這里蜜唾。
期待你的點評杂曲。
參考:
DataTables官網(wǎng)
DataTables中文網(wǎng)
自行封裝請求和返回數(shù)據(jù)的零耦合服務(wù)端分頁
本文采用知識共享署名-相同方式共享 4.0 國際許可協(xié)議進行許可。
基于簡書上的作品創(chuàng)作袁余。 可轉(zhuǎn)載擎勘、引用，但需經(jīng)本人同意后署名作者且注明文章出處颖榜，并以相同方式共享棚饵。
知識共享許可協(xié)議
