jquery/jq-ui datatable配置項說明
jQuery 的插件 dataTables 是一個優秀的表格插件，提供了針對表格的排序、瀏覽器分頁、服務器分頁、篩選、格式化等功能。dataTables 的網站上也提供了大量的演示和詳細的文檔進行說明，爲了方便學習使用，這裏一步一步進行說明。javascript
首先，須要到 dataTables 的網站 http://www.datatables.net/ 下載這個腳本庫，css
目前最新的版本是 1.8.2，下載的壓縮包中使用的 jQuery 是 1.4.4 。如今 jQuery1.5.1 已經發布，因此，這裏使用最新的 jQuery 1.5.1 。html
而後，在網頁中先加入 jQuery 的引用，而後，加入 dataTables 的引用。java
引入CSS文件和JS文件node
<style type="text/css" title="currentStyle"> @import "DataTables-1.8.1/media/css/demo_page.css"; @import "DataTables-1.8.1/media/css/demo_table.css"; @import "DataTables-1.8.1/media/css/demo_table_jui.css"; </style> <script type="text/JavaScript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script> <script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script>
-----------最簡單的方式：jquery
$(document).ready(function() {數組
$("#example").dataTable();瀏覽器
});服務器
----------也能夠本身定義各屬性：cookie
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#example").dataTable({
// "bPaginate": true, //開關，是否顯示分頁器
// "bInfo": true, //開關，是否顯示錶格的一些信息
// "bFilter": true, //開關，是否啓用客戶端過濾器
// "sDom": "<>lfrtip<>",
// "bAutoWith": false,
// "bDeferRender": false,
// "bJQueryUI": false, //開關，是否啓用JQueryUI風格
// "bLengthChange": true, //開關，是否顯示每頁大小的下拉框
// "bProcessing": true,
// "bScrollInfinite": false,
// "sScrollY": "800px", //是否開啓垂直滾動，以及指定滾動區域大小,可設值：'disabled','2000px'
// "bSort": true, //開關，是否啓用各列具備按列排序的功能
// "bSortClasses": true,
// "bStateSave": false, //開關，是否打開客戶端狀態記錄功能。這個數據是記錄在cookies中的，打開了這個記錄後，即便刷新一次頁面，或從新打開瀏覽器，以前的狀態都是保存下來的- ------當值爲true時aoColumnDefs不能隱藏列
// "sScrollX": "50%", //是否開啓水平滾動，以及指定滾動區域大小,可設值：'disabled','2000%'
// "aaSorting": [[0, "asc"]],
// "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隱藏列
// "sDom": '<"H"if>t<"F"if>',
"bAutoWidth": false, //自適應寬度
"aaSorting": [[1, "asc"]],
"sPaginationType": "full_numbers",
"oLanguage": {
"sProcessing": "正在加載中......",
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sZeroRecords": "對不起，查詢不到相關數據！",
"sEmptyTable": "表中無數據存在！",
"sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",
"sInfoFiltered": "數據表中共爲 _MAX_ 條記錄",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "末頁"
}
} //多語言配置
});
});
</script>
----------------頁面：
對於 dataTables 來講，表格必須經過 thead 和 tbody 進行說明，以下所示，
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> <thead> <tr> <th> Rendering engine </th> <th> Browser </th> <th> Platform(s) </th> <th> Engine version </th> <th> CSS grade </th> </tr> </thead> <tbody> <tr class="odd gradeX"> <td> Trident </td> <td> Internet Explorer 4.0 </td> <td> Win 95+ </td> <td class="center"> 4 </td> <td class="center"> X </td> </tr>
若是沒有 thead 將會報錯。
最爲簡單的使用方式，就是零配置的方式。
/*
* Example init
*/
$(document).ready(function(){
$('#example').dataTable();
});
如下是在進行dataTable綁定處理時候能夠附加的參數：
| 屬性名稱 | 取值範圍 | 解釋 |
| bAutoWidth | true or false, default true | 是否自動計算表格各列寬度 |
| bDeferRender | true or false, default false | 用於渲染的一個參數 |
| bFilter | true or false, default true | 開關，是否啓用客戶端過濾功能 |
| bInfo | true or false, default true | 開關，是否顯示錶格的一些信息 |
| bJQueryUI | true or false, default false | 是否使用jquery ui themeroller的風格 |
| bLengthChange | true or false, default true | 開關，是否顯示一個每頁長度的選擇條（須要分頁器支持） |
| bPaginate | true or false, default true | 開關，是否顯示（使用）分頁器 |
| bProcessing | true or false, defualt false | 開關，以指定當正在處理數據的時候，是否顯示「正在處理」這個提示信息 |
| bScrollInfinite | true or false, default false | 開關，以指定是否無限滾動（與sScrollY配合使用），在大數據量的時候頗有用。當這個標誌爲true的時候，分頁器就默認關閉 |
| bSort | true or false, default true | 開關，是否讓各列具備按列排序功能 |
| bSortClasses | true or false, default true | 開關，指定當當前列在排序時，是否增長classes 'sorting_1', 'sorting_2' and 'sorting_3'，打開後，在處理大數據時，性能有所損失 |
| bStateSave | true or false, default false | 開關，是否打開客戶端狀態記錄功能。這個數據是記錄在cookies中的，打開了這個記錄後，即便刷新一次頁面，或從新打開瀏覽器，以前的狀態都是保存下來的 |
| sScrollX | 'disabled' or '100%' 相似的字符串 | 是否開啓水平滾動，以及指定滾動區域大小 |
| sScrollY | 'disabled' or '200px' 相似的字符串 | 是否開啓垂直滾動，以及指定滾動區域大小 |
| -- | -- | -- |
| 選項 | ||
| aaSorting | array array[int,string], 如[], [[0,'asc'], [0,'desc']] | 指定按多列數據排序的依據 |
| aaSortingFixed | 同上 | 同上。惟一不一樣點是不能被用戶的自定義配置衝突 |
| aLengthMenu | default [10, 25, 50, 100]，能夠爲一維數組，也可爲二維數組，好比：[[10, 25, 50, -1], [10, 25, 50, "All"]] | 這個爲選擇每頁的條目數，當使用一個二維數組時，二維層面只能有兩個元素，第一個爲顯示每頁條目數的選項，第二個是關於這些選項的解釋 |
| aoSearchCols | default null, 相似：[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}] | 給每一個列單獨定義其初始化搜索列表特性（這一塊還沒搞懂） |
| asStripClasses | default ['odd', 'even'], 好比['strip1', 'strip2', 'strip3'] | 指定要被應用到各行的class風格，會自動循環 |
| bDestroy | true or false, default false | 用於當要在同一個元素上執行新的dataTable綁定時，將以前的那個數據對象清除掉，換以新的對象設置 |
| bRetrieve | true or false, default false | 用於指明當執行dataTable綁定時，是否返回DataTable對象 |
| bScrollCollapse | true or false, default false | 指定適當的時候縮起滾動視圖 |
| bSortCellsTop | true or false, default false | （未知的東東） |
| iCookieDuration | 整數，默認7200，單位爲秒 | 指定用於存儲客戶端信息到cookie中的時間長度，超過這個時間後，自動過時 |
| iDeferLoading | 整數，默認爲null | 延遲加載，它的參數爲要加載條目的數目，一般與bServerSide，sAjaxSource等配合使用 |
| iDisplayLength | 整數，默認爲10 | 用於指定一屏顯示的條數，需開啓分頁器 |
| iDisplayStart | 整數，默認爲0 | 用於指定從哪一條數據開始顯示到表格中去 |
| iScrollLoadGap | 整數，默認爲100 | 用於指定當DataTable設置爲滾動時，最多能夠一屏顯示多少條數據 |
| oSearch | 默認{ "sSearch": "", "bRegex": false, "bSmart": true } | 又是初始時指定搜索參數相關的，有點複雜，沒搞懂目前 |
| sAjaxDataProp | 字符串，default 'aaData' | 指定當從服務端獲取表格數據時，數據項使用的名字 |
| sAjaxSource | URL字符串，default null | 指定要從哪一個URL獲取數據 |
| sCookiePrefix | 字符串，default 'SpryMedia_DataTables_' | 當打開狀態存儲特性後，用於指定存儲在cookies中的字符串的前綴名字 |
| sDom | default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) | 這是用於定義DataTable佈局的一個強大的屬性，另開專門文檔來補充說明吧 |
| sPaginationType | 'full_numbers' or 'two_button', default 'two_button' | 用於指定分頁器風格 |
| sScrollXInner | string default 'disabled' | 又是水平滾動相關的，沒搞懂啥意思 |
DataTable支持以下回調函數
| 回調函數名稱 | 參數 | 返回值 | 默認 | 功能 |
| fnCookieCallback | 1.string: Name of the cookie defined by DataTables 2.object: Data to be stored in the cookie 3.string: Cookie expires string 4.string: Path of the cookie to set | string: cookie formatted string (which should be encoded by using encodeURIComponent()) | null | 當每次cookies改變時，會觸發這個函數調用 |
| fnDrawCallback | 無 | 無 | 無 | 在每次table被draw完後調用，至於作什麼就看着辦吧 |
| fnFooterCallback | 1.node : "TR" element for the footer 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array< 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array | 無 | 無 | 用於在每次重畫的時候修改表格的腳部 |
| fnFormatNumber | 1.int : number to be formatted | String : formatted string for DataTables to show the number | 有默認的 | 用於在大數字上，自動加入一些逗號，分隔開 |
| fnHeaderCallback | 1.node : "TR" element for the header 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array | 無 | 無 | 用於在每次draw發生時，修改table的header |
| fnInfoCallback | 1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering) 5.int: Total number of rows in the data set, after filtering 6.string: The string that DataTables has formatted using it's own rules | string: The string to be displayed in the information element. | 無 | 用於傳達table信息 |
| fnInitComplete | 1.object:oSettings - DataTables settings object | 無 | 無 | 表格初始化完成後調用 |
| fnPreDrawCallback | 1.object:oSettings - DataTables settings object | Boolean | 無 | 用於在開始繪製以前調用，返回false的話，會阻止draw事件發生；返回其它值，draw能夠順利執行 |
| fnRowCallback | 1.node : "TR" element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int : The index of the data in the full list of rows (after filtering) | node : "TR" element for the current row | 無 | 當建立了行，但還未繪製到屏幕上的時候調用，一般用於改變行的class風格 |
| fnServerData | 1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page. | void | $.getJSON | 用於替換默認發到服務端的請求操做 |
| fnStateLoadCallback | 1.object:oSettings - DataTables settings object 2.object:oData - Object containing information retrieved from the state saving cookie which should be restored. For the exact properties please refer to the DataTables code. | Boolean - false if the state should not be loaded, true otherwise | 無 | 在cookies中的數據被加載前執行，能夠方便地修改這些數據 |
| fnStateSaveCallback | 1.object:oSettings - DataTables settings object 2.String:sValue - a JSON string (without the final closing brace) which should be stored in the state saving cookie. | String - the full string that should be used to save the state | 無 | 在狀態數據被存儲到cookies前執行，能夠方便地作一些預操做 |
表格的效果
注意，紅框表示了四個默認的設置效果，分別用來選擇每頁的行數，表格的過濾器，表格的信息和換頁。
此時，使用了幾個默認的參數設置。在 dataTables 中，參數名稱的前綴用來講明參數的數據類型，很明顯，b 表示布爾類型，i 表示整數類型，s 表示字符串類型。
- bPaginate: 是否分頁，默認爲 true，分頁
- iDisplayLength : 每頁的行數，每頁默認數量:10
- sPaginationType: 分頁樣式，支持兩種內置方式，two_button 和 full_numbers, 默認使用 two_button。
- bLengthChange : 是否容許用戶經過一個下拉列表來選擇分頁後每頁的行數。行數爲 10，25，50，100。這個設置須要 bPaginate 支持。默認爲 true。
- bFilter: 啓用或禁止數據過濾，默認爲 true。 注意，若是使用過濾功能，可是但願關閉默認的過濾輸入框，應使用 sDom
- bInfo: 容許或者禁止表信息的顯示，默認爲 true，顯示信息。
咱們也能夠經過傳遞一個初始化參數對象來改變這些設置。例如，下面的例子將每頁的行數設置爲 20 行
$(function () {
$("#example").dataTable(
{
iDisplayLength: 20
}
);
});
- 1. Redis--redis.conf配置項說明
- 2. 2、Redis 配置項說明
- 3. tslint.json的配置項說明
- 4. VIM選項配置說明
- 5. redis.conf 配置項說明
- 6. IOS , plist 配置項說明
- 7. XCode 項目配置說明
- 8. EasymybatisConfig配置項說明
- 9. RabbitMQ-02-配置項說明
- 10. VS項目配置項說明
- 更多相關文章...
- • Eclipse 窗口說明 - Eclipse 教程
- • PHP EOF(heredoc) 使用說明 - PHP教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • IDEA下SpringBoot工程配置文件沒有提示
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Redis--redis.conf配置項說明
- 2. 2、Redis 配置項說明
- 3. tslint.json的配置項說明
- 4. VIM選項配置說明
- 5. redis.conf 配置項說明
- 6. IOS , plist 配置項說明
- 7. XCode 項目配置說明
- 8. EasymybatisConfig配置項說明
- 9. RabbitMQ-02-配置項說明
- 10. VS項目配置項說明