Datables使用總結

本文共四部分：官網 | 基本使用|遇到的問題|屬性表

一：官方網站：[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""	又是程度遷移轉變相干的，沒搞懂啥意思