當系統數據量很大時，前端的分頁、異步獲取方式就成了較好的解決方案。一直以來，我都希望使用自己開發的 jquery 插件做系統。
現在，學習了 jquery 插件開發之后，漸漸地也自己去嘗試着開發一些簡單的插件，之前已經開發了手風琴、選項卡，今天和大家介紹一下這個 datatable 分頁表格插件。
我們先講解使用，再分析插件的實現方式。
手冊地址：http://5ijy01.duapp.com/jq-ui/index.html?tab=tab12
1、引入jquery庫和插件庫、css文件
首先需要引入 jquery 庫，因為我們的 datatable 插件依賴另外一個分頁插件，所有需要先把這個分頁插件庫引入進來，最后再引入 datatable 插件的 js 和 css 文件
1 <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> 2 3 <script type="text/javascript" src="js/pagination.js"></script> 4 <link rel="stylesheet" href="css/blue/pagination.css"/> 5 6 <script type="text/javascript" src="js/datatable.js"></script> 7 <link rel="stylesheet" href="css/blue/datatable.css"/>
2、插件使用
下面我們就介紹下插件如何使用。
首先，我們需要寫一個 table 標簽，其實，最主要的代碼就只有第 5 行的 table 標簽，前面的幾個 button 是為了看插件交互的。
1 <button class="default-button" onclick="update();">修 改</button> 2 <button class="default-button" onclick="del();">刪 除</button> 3 <button class="default-button" onclick="reload();">刷 新</button> 4 5 <table id="first-datatable"></table>
然后，我們需要寫一段 script 腳本來初始化 datatable 組件，以及加載首頁數據。
1 $("#first-datatable").datatable({ 2 width: "1000", 3 height: "auto", 4 columns: [ 5 { field: "id", columnName: "編號", css: { "text-align": "center" } }, 6 { field: "username", columnName: "用戶名" }, 7 { field: "age", columnName: "年齡" }, 8 { field: "phone", columnName: "聯系電話", css: { "text-align": "center" } }, 9 { field: "email", columnName: "郵箱" }, 10 { field: "description", columnName: "自我介紹" } 11 ], 12 url: "/jq-ui/ajax/admin_json.jsp", 13 pageNum: 1, // 顯示第幾頁數據，默認1 14 pageSize: 15, // 每頁數據數量，默認10 15 pagination: true, // 是否啟用分頁組件，默認啟用 16 showCheckbox: true 17 });
我們簡單介紹一下參數：
width： 是包裹 table 標簽的 div 的寬度，您可以不設置這個參數的值，默認使用的 100% 即父元素的寬度
height： 是包裹 table 標簽的 div 的高度，默認 auto
columns： 是一個 object[] 對象，定義 table 的列信息，包括列名、字段的 key、css樣式
url： 獲取異步數據的遠程地址
pageNum：初始化時顯示第幾頁數據
pageSize：每頁顯示多少數據
pagination：是否啟用分頁組件
showCheckbox：是否顯示行首的復選框，這個參數在需要進行數據選擇時使用
后台代碼就不在這個介紹了，如果需要可以去下載插件項目代碼。后台返回一個 json 數據，應該包括最大頁數、數據集合信息，如下：
現在，可以看到插件的效果了：
3、插件的實現方式和核心函數
插件初始化時首先生成 thead 和 表頭，然后在 table 外面包裹一個 div ， 然后通過參數配置的 url 參數獲取數據，加載到 table 的 tbody 中。在這個過程中，會通過參數判斷是否顯示行首的復選框和分頁組件。分頁插件我們不做重點介紹，datatable 插件中的代碼如下：
1 if(options["pagination"]) { 2 // 先把之前的分頁組件刪除 3 $datatable.parent().find(".pagination").remove(); 4 // 定義一個div用於顯示分頁組件 5 var $pagination = $("<div></div>").css("margin-top", "10px"); 6 // 初始化分頁組件 7 $pagination.pagination({ 8 pageNum: options["pageNum"], 9 size: options["pageSize"], 10 total: data["totalPage"], 11 click: function(curr, s) { 12 options["pageNum"] = curr; 13 $.data(this, "datatable", options); 14 loadData($datatable); 15 return data["totalPage"]; 16 } 17 }); 18 // 把分頁組件追加到datatable組件 19 $datatable.parent().append($pagination); 20 }
為了方便用戶獲取數據、刷新表格，插件提供了兩個函數：
4、刷新、獲取
下面我們簡單介紹下如何使用 reload 和 getSelectRows 函數
刪除按鈕的事件函數：
1 /* 2 * 刪除函數 3 */ 4 function del(tid) { 5 var rows = $("#" + tid).datatable("getSelectRows"); 6 if(rows.length < 1) { 7 alert("請至少選擇一條數據"); 8 return; 9 } 10 var ids = new Array(); 11 for(var i = 0; i < rows.length; i++) { 12 var id = rows[i]["id"]; 13 ids.push(id); 14 } 15 console.log(ids); 16 $.ajax({ 17 type: "post", 18 dataType: "json", 19 data: { "ids": ids}, 20 traditional: true, 21 url: "/jq-ui/ajax/admin_del.jsp", 22 success: function(data) { 23 if(data["retCode"] == '0') { 24 alert("刪除成功"); 25 $("#" + tid).datatable("reload"); 26 } 27 } 28 }); 29 }
更新按鈕的事件函數類似，就不再重復介紹了。
刷新按鈕的事件函數：
1 /* 2 * 點擊"刷新"后調用datatable的reload函數重新加載數據 3 */ 4 function reload(id) { 5 $("#" + id).datatable("reload"); 6 }
5、項目地址
datatable.js http://5ijy01.duapp.com/jq-ui/js/datatable.js
datatable.css http://5ijy01.duapp.com/jq-ui/css/blue/datatable.css
演示項目在 http://5ijy01.duapp.com/jq-ui/index.html
github項目在 https://github.com/xuguofeng/jq-ui