一、問題描述
園友是做前端的，產品經理要求他使用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 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><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資料格式:
效果圖:
精彩專題分享：jquery分頁功能操作 JavaScript分頁功能操作
本文就介紹到這裡，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
