DataTables是一個非常好用的JQuery分頁套件,主要是屬性很多,可以進行客製化。
DataTables的官方網站
官方網站有許多屬性的相關資料,以下為
使用上的畫面大致為~
屬性設定方式是在宣告datatable的function裡面塞入屬性。
以下介紹幾個常用的屬性:(官網 Usage->Feature 裡有原文)
bAutoWidth:自動調整欄位寬度(true or false)
bFilter:右上角的關鍵字搜尋功能(true or false)
bInfo:下方顯示Showing 1 to X of O entries欄位(true or false)
bJQueryUI:使用jQuery UI ThemeRoller
bLengthChange:左上角選擇一次顯示多少筆資料(true or false)
bPaginate:顯示下方切頁按鈕(true or false)
bProcessing:是否顯示"資料正在處理中"的提示(true or false)
bSort:關閉所有欄位的sorting(true or false),如果要關閉單一欄位使用"bSortable"
bStateSave:使用cookies記錄使用者目前瀏覽datatable的狀態(true or false),例如切到哪一頁,之後固定時間內回來還是會看到那一頁。
還有一些針對欄位設定的屬性:
aoData:設定每個欄位自己的屬性,以下範例為第六個欄位不能被關鍵字搜尋,也不能排序。
"aoData": [ null, null, null, null, null, { "bSortable": false, "bSearchable": false } ]
aaSorting:設定欄位排序的屬性,以下範例為第三個欄位(由0開始)以倒序排序。
如果要進行語言標籤的設置,也可以在屬性部分進行設定:
oLanguage:設定各個語言標籤屬性,如下範例。
DataTables的官方網站
官方網站有許多屬性的相關資料,以下為
使用上的畫面大致為~
![]() |
※自官方網站截下來的範例圖 |
$(document).ready(function() {
$('#example').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false
} );
} );
以下介紹幾個常用的屬性:(官網 Usage->Feature 裡有原文)
bAutoWidth:自動調整欄位寬度(true or false)
bFilter:右上角的關鍵字搜尋功能(true or false)
bInfo:下方顯示Showing 1 to X of O entries欄位(true or false)
bJQueryUI:使用jQuery UI ThemeRoller
bLengthChange:左上角選擇一次顯示多少筆資料(true or false)
bPaginate:顯示下方切頁按鈕(true or false)
bProcessing:是否顯示"資料正在處理中"的提示(true or false)
bSort:關閉所有欄位的sorting(true or false),如果要關閉單一欄位使用"bSortable"
bStateSave:使用cookies記錄使用者目前瀏覽datatable的狀態(true or false),例如切到哪一頁,之後固定時間內回來還是會看到那一頁。
還有一些針對欄位設定的屬性:
aoData:設定每個欄位自己的屬性,以下範例為第六個欄位不能被關鍵字搜尋,也不能排序。
"aoData": [ null, null, null, null, null, { "bSortable": false, "bSearchable": false } ]
aaSorting:設定欄位排序的屬性,以下範例為第三個欄位(由0開始)以倒序排序。
"aaSorting": [[ 2, "desc" ]]
如果要進行語言標籤的設置,也可以在屬性部分進行設定:
oLanguage:設定各個語言標籤屬性,如下範例。
"oLanguage": {
"sProcessing": "Processing...",
"sLengthMenu": "Show _MENU_ entries",
"sZeroRecords": "No matching records found",
"sEmptyTable": "No data available in table",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
"sInfoEmpty": "Showing 0 to 0 of 0 entries",
"sInfoFiltered": "(filtered from _MAX_ total entries)",
"sInfoPostFix": "",
"sSearch": "Search:",
"sUrl": "",
"oPaginate": {
"sFirst": "First",
"sPrevious": "Previous",
"sNext": "Next",
"sLast": "Last"
}
}"sLengthMenu": "Show _MENU_ entries",
"sZeroRecords": "No matching records found",
"sEmptyTable": "No data available in table",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
"sInfoEmpty": "Showing 0 to 0 of 0 entries",
"sInfoFiltered": "(filtered from _MAX_ total entries)",
"sInfoPostFix": "",
"sSearch": "Search:",
"sUrl": "",
"oPaginate": {
"sFirst": "First",
"sPrevious": "Previous",
"sNext": "Next",
"sLast": "Last"
}
留言
張貼留言