jquery DataTables中文使用說明
本文共四部分：官網 | 基本使用|遇到的問題|屬性表
一：官方網站：[http://www.datatables.net/]
二：基本使用：[http://www.guoxk.com/node/jquery-datatables]
1、DataTables的默認配置
$(document).ready(function() {
$('#example').dataTable();
} );
示例：http://www.guoxk.com/html/DataTables/Zero-configuration.html
2、DataTables的一些基礎屬性配置
"bPaginate": true, //翻頁功能
"bLengthChange": true, //改變每頁顯示數據數量
"bFilter": true, //過濾功能
"bSort": false, //排序功能
"bInfo": true,//頁腳信息
"bAutoWidth": true//自動寬度
示例：http://www.guoxk.com/html/DataTables/Feature-enablement.html
3、數據排序
$(document).ready(function() {
$('#example').dataTable( {
"aaSorting": [
[ 4, “desc” ]
]
} );
} );
從第0列開始，以第4列倒序排列
示例：http://www.guoxk.com/html/DataTables/Sorting-data.html
4、多列排序
示例：http://www.guoxk.com/html/DataTables/Multi-column-sorting.html
5、隱藏某些列
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );
} );
示例：http://www.guoxk.com/html/DataTables/Hidden-columns.html
6、改變頁面上元素的位置
$(document).ready(function() {
$('#example').dataTable( {
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
} );
} );
//l- 每頁顯示數量
//f – 過濾輸入
//t – 表單Table
//i – 信息
//p – 翻頁
//r – pRocessing
//< and > – div elements
//<"class" and > – div with a class
//Examples: <"wrapper"flipt>, <lf<t>ip>
示例：http://www.guoxk.com/html/DataTables/DOM-positioning.html
7、狀態保存，使用了翻頁或者改變了每頁顯示數據數量，會保存在cookie中，下回訪問時會顯示上一次關閉頁面時的內容。
$(document).ready(function() {
$('#example').dataTable( {
"bStateSave": true
} );
} );
示例：http://www.guoxk.com/html/DataTables/State-saving.html
8、顯示數字的翻頁樣式
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );
示例：http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html
9、水平限制寬度
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
} );
} );
示例：http://www.guoxk.com/html/DataTables/Horizontal.html
10、垂直限制高度
示例：http://www.guoxk.com/html/DataTables/Vertical.html
11、水平和垂直兩個方向共同限制
示例：http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html
12、改變語言
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sZeroRecords": "抱歉， 沒有找到",
"sInfo": "從 _START_ 到 _END_ /共 _TOTAL_ 條數據",
"sInfoEmpty": "沒有數據",
"sInfoFiltered": "(從 _MAX_ 條數據中檢索)",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "前一頁",
"sNext": "後一頁",
"sLast": "尾頁"
},
"sZeroRecords": "沒有檢索到數據",
"sProcessing": "<img src='./loading.gif' />"
}
} );
} );
示例：http://www.guoxk.com/html/DataTables/Change-language-information.html
13、click事件
示例：http://www.guoxk.com/html/DataTables/event-click.html
14/配合使用tooltip插件
示例：http://www.guoxk.com/html/DataTables/tooltip.html
15、定義每頁顯示數據數量
$(document).ready(function() {
$('#example').dataTable( {
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, “All”]]
} );
} );
示例：http://www.guoxk.com/html/DataTables/length_menu.html
16、row callback
示例：http://www.guoxk.com/html/DataTables/RowCallback.html
最後一列的值如果爲“A”則加粗顯示
17、排序控制
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
{ "asSorting": [ “asc” ] },
{ "asSorting": [ “desc”, “asc”, “asc” ] },
{ "asSorting": [ ] },
{ "asSorting": [ ] }
]
} );
} );
示例：http://www.guoxk.com/html/DataTables/sort.html
說明：第一列點擊按默認情況排序，第二列點擊已順序排列，第三列點擊一次倒序，二三次順序，第四五列點擊不實現排序
18、從配置文件中讀取語言包
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sUrl": "cn.txt"
}
} );
} );
19、是用ajax源
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": './arrays.txt'
} );
} );
示例：http://www.guoxk.com/html/DataTables/ajax.html
20、使用ajax，在服務器端整理數據
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers","sAjaxSource": "./server_processing.php",
/*如果加上下面這段內容，則使用post方式傳遞數據
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}*/
"oLanguage": {
"sUrl": "cn.txt"
},
"aoColumns": [
{ "sName": "platform" },
{ "sName": "version" },
{ "sName": "engine" },
{ "sName": "browser" },
{ "sName": "grade" }
]//$_GET[‘sColumns’]將接收到aoColumns傳遞數據
} );
} );
示例：http://www.guoxk.com/html/DataTables/ajax-serverSide.html
21、爲每行加載id和class
服務器端返回數據的格式：
{
"DT_RowId": "row_8",
"DT_RowClass": "gradeA",
"0": "Gecko",
"1": "Firefox 1.5",
"2": "Win 98+ / OSX.2+",
"3": "1.8",
"4": "A"
},
示例：http://www.guoxk.com/html/DataTables/add_id_class.html
22、爲每行顯示細節，點擊行開頭的“+”號展開細節顯示
示例：http://www.guoxk.com/html/DataTables/with-row-information.html
23、選擇多行
示例：http://www.guoxk.com/html/DataTables/selectRows.html
22、集成jQuery插件jEditable
示例：http://www.guoxk.com/html/DataTables/jEditable-integration.html
示例打包下載：http://www.guoxk.com/html/DataTables/DataTables.rar
三、遇到的問題
3.1“Cannot
reinitialise DataTable.
To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy ”
解決辦法：http://blog.csdn.net/mickey_miki/article/details/8239185
3.2 排序時指定某列不可排序
- $(".datatable").dataTable( {
- "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }]
- });
注意： "bSort": true, //排序功能 要註釋掉
3.3 確定選擇每頁展示個數列表和默認每頁展示個數設置
- "aLengthMenu": [[4, 10, 20, -1], [4, 10, 20, "所有"]],
- "iDisplayLength":4
四、屬性表
|
屬性名稱 |
取值侷限 |
申明 |
|
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"" |
又是程度遷移轉變相干的，沒搞懂啥意思 |