jQuery DataTables插件自定義Ajax分頁實例解析

2019-11-20 09:58:30

字體：大中小

來源：轉載

供稿：網友

一、問題描述
園友是做前端的，產品經理要求他使用jQuery DataTables插件顯示一個列表，要實現分類效果。

后端的分頁接口已經寫好了，不涉及條件查詢，需要傳入頁碼(pageNo)和頁面顯示數據條數(pageSize)，顯示相應頁的顯示記錄，且不能修改后端接口。

二、分析
先來分析下分頁實現。
一是后端分頁：這種情況下，在后端很容易實現，在官網上有示例，不多說明。
二是前端分頁：前端分頁也是支持的，不過需要一次把所有數據都獲取到才可以。

看到這里，問題來了。由于后端在目前的情況下是更改不了，只能在前端實現。但是，現在又不滿足前端分頁的條件：

一次性獲取所有數據（現在后端數據接口只能返回相應頁碼的數據）。

介于目前的情況，獲取的數據只有一頁，沒有所有的頁碼。
試試能不能偽裝一下后端分頁的情況，就是開啟后端分頁，在請求之前，將傳入的數據進行重組，在獲取到數據后，將返回的數據按照后端分頁的數據格式組裝一遍。

經過測試，是可以的。

三、實現
通過DataTables配置參數ajax項實現的。關于ajax詳細介紹請看官方說明：中文 | 英文

ajax接收三種類型的參數：
*string：設置獲取數據的url
*object：和 jQuery.ajax 定義類似
*function：自定義獲取數據的功能
直接上代碼吧，都有注釋。
前端頁面代碼：

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jquery DataTables插件自定義分頁ajax實現</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實現</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": "沒有匹配結果", "sInfo": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。", "sInfoEmpty": "當前顯示第 0 至 0 項，共 0 項", "sInfoFiltered": "(由 _MAX_ 項結果過濾)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中數據為空", "sLoadingRecords": "載入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首頁", "sPrevious": "上頁", "sNext": "下頁", "sLast": "末頁", "sJump": "跳轉" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }; //初始化表格 var table = $("#example").dataTable({ language:lang, //提示信息 autoWidth: false, //禁用自動調整列寬 stripeClasses: ["odd", "even"], //為奇偶行加上樣式，兼容不支持CSS偽類的場合 processing: true, //隱藏加載提示,自行處理 serverSide: true, //啟用服務器端分頁 searching: false, //禁用原生搜索 orderMulti: false, //啟用多列排序 order: [], //取消默認排序查詢,否則復選框一列會出現小箭頭 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) { //封裝請求參數 var param = {}; param.limit = data.length;//頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候 param.start = data.start;//開始的記錄序號 param.page = (data.start / data.length)+1;//當前頁碼 //console.log(param); //ajax請求數據 $.ajax({  type: "GET",  url: "/hello/list",  cache: false, //禁用緩存  data: param, //傳入組裝的參數  dataType: "json",  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);  } }); }, //列表表頭字段 columns: [ { "data": "Id" }, { "data": "Name" }, { "data": "Sex" } ] }).api(); //此處需調用api()方法,否則返回的是JQuery對象而不是DataTables的API對象 });</script></body></html>

JSON數據格式: