jquery datatable是款非常豐富的表格插件，使用者可以使用它使表格擁有各種附屬功能的如排序、分頁、Ajax表格等.....。它的使用不難，但由於參數多元且官方是英文，所以整理記錄一下XD
官方網址:http://datatables.net/
使用版本:1.10.2
以下為要開始實作的最簡單的範例，後續慢慢會加入其他參數完整程式碼可參考http://jsfiddle.net/cheemax/LLvqrcam/ 呼叫dataTable產生表格(無任何參數)
$(document).ready(function() {
$('#example').dataTable();
} );
Features參數
| 參數 | 預設 | 說明 |
|---|---|---|
| bAutoWidth | true | 可自動對齊優化表格，但會消耗一點效能在計算表格寬度上 |
| bDeferRender | false | 對於ajax或JS data source，提升速度 |
| bFilter | true | 可以搜尋整個表格欄位裡的值，非常好用 |
| bInfo | true | 顯示表格的相關資訊，包括當前頁面紀錄，以及總記錄頁面數量。 |
| bJQueryUI | false | 可載入Jquery UI主題 |
| bLengthChange | true | 開啟下拉式選擇顯示幾筆資料 |
| bPaginate | true | 開啟分頁功能，關閉將會全部顯示 |
| bProcessing | false | 開啟顯示loading效果，對於大量資料效果不錯 |
| bScrollInfinite | false | 當縱軸內容超過當前頁面高度時會收起超過的內容，使起可以縱向移動，可配合bPaginate、sScrollY |
| bServerSide | false | 開啟時所做的過濾、分頁等都必須由後端進行處理後return回來 |
| bSort | true | 排序功能、針對欄位做排序 |
| bSortClasses | true | 為正在排序的欄位增加class屬性，但對於大量資料較不適合，會影響效能 |
| bStateSave | false | 開啟後將產生cookies保存表格狀態，保存內容包刮當前分頁、顯示長度、過濾和排序內容，當最後一個使用者關閉頁面後，下一個使用者開啟即載入當前狀態 |
| sScrollX | 空字串 | 指定頁面寬度(可以是CSS單位或數字) |
| sScrollY | 空字串 | 指定頁面高度(可以是CSS單位或數字) |
API參數
| 參數 | 傳入 | 說明 |
|---|---|---|
| push() | 加入一個或多個選項回傳到指派的變數裡 | |
| fnAddData() | Array或Object | 加入一行或多行資料(增加只是在client端，如果要同步到server端需開啟bServerSide) |
| fnAdjustColumnSizing() | boolean | 重新計算表格大小 |
| fnDraw() | boolean | 重整表格 |
| fnFilter() | String | 依照傳入的值，對表單過濾 |
| fnDestroy() | boolean | 將整個表單恢復 |
0 意見 :
張貼留言