昨天在博客園的博問上幫一位園友解決了一個問題,我以爲有必要記錄一下,萬一有人也趕上了呢。javascript
園友是作前端的,產品經理要求他使用jQuery DataTables插件顯示一個列表,要實現分類效果。css
後端的分頁接口已經寫好了,不涉及條件查詢,須要傳入頁碼(pageNo)和頁面顯示數據條數(pageSize),顯示相應頁的顯示記錄,且不能修改後端接口。html
先來分析下分頁實現。
一是後端分頁:這種狀況下,在後端很容易實現,在官網上有示例,很少說明。
二是前端分頁:前端分頁也是支持的,不過須要一次把全部數據都獲取到才能夠。前端
看到這裏,問題來了。因爲後端在目前的狀況下是更改不了,只能在前端實現。可是,如今又不知足前端分頁的條件:一次性獲取全部數據(如今後端數據接口只能返回相應頁碼的數據)。java
介於目前的狀況,獲取的數據只有一頁,沒有全部的頁碼。
試試能不能假裝一下後端分頁的狀況,就是開啓後端分頁,在請求以前,將傳入的數據進行重組,在獲取到數據後,將返回的數據按照後端分頁的數據格式組裝一遍。jquery
通過測試,是能夠的。ajax
經過DataTables配置參數ajax項實現的。關於ajax詳細介紹請看官方說明:中文 | 英文json
ajax接收三種類型的參數:bootstrap
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數據格式:
效果圖:
本文就介紹到這裏。
期待你的點評。