1、DataTables的默認(rèn)配置

$(document).ready(function() { $(‘#example’).dataTable(); } );

示例：http://www.guoxk.com/html/DataTables/Zero-configuration.html

2、DataTables的一些基礎(chǔ)屬性配置

“bPaginate”: true, //翻頁功能 “bLengthChange”: true, //改變每頁顯示數(shù)據(jù)數(shù)量 “bFilter”: true, //過濾功能 “bSort”: false, //排序功能 “bInfo”: true,//頁腳信息 “bAutoWidth”: true//自動(dòng)寬度

示例：http://www.guoxk.com/html/DataTables/Feature-enablement.html

3、數(shù)據(jù)排序

$(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- 每頁顯示數(shù)量 //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、狀態(tài)保存，使用了翻頁或者改變了每頁顯示數(shù)據(jù)數(shù)量，會(huì)保存在cookie中，下回訪問時(shí)會(huì)顯示上一次關(guān)閉頁面時(shí)的內(nèi)容。

$(document).ready(function() { $(‘#example’).dataTable( { “bStateSave”: true } ); } );

示例：http://www.guoxk.com/html/DataTables/State-saving.html

8、顯示數(shù)字的翻頁樣式

$(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、水平和垂直兩個(gè)方向共同限制

示例：http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html

12、改變語言

$(document).ready(function() { $(‘#example’).dataTable( { “oLanguage”: { “sLengthMenu”: “每頁顯示 _MENU_ 條記錄”, “sZeroRecords”: “抱歉， 沒有找到”, “sInfo”: “從 _START_ 到 _END_ /共 _TOTAL_ 條數(shù)據(jù)”, “sInfoEmpty”: “沒有數(shù)據(jù)”, “sInfoFiltered”: “(從 _MAX_ 條數(shù)據(jù)中檢索)”, “oPaginate”: { “sFirst”: “首頁”, “sPrevious”: “前一頁”, “sNext”: “后一頁”, “sLast”: “尾頁” }, “sZeroRecords”: “沒有檢索到數(shù)據(jù)”, “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、定義每頁顯示數(shù)據(jù)數(shù)量

$(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
說明：第一列點(diǎn)擊按默認(rèn)情況排序，第二列點(diǎn)擊已順序排列，第三列點(diǎn)擊一次倒序，二三次順序，第四五列點(diǎn)擊不實(shí)現(xiàn)排序

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，在服務(wù)器端整理數(shù)據(jù)

$(document).ready(function() { $(‘#example’).dataTable( { “bProcessing”: true, “bServerSide”: true, “sPaginationType”: “full_numbers”, “sAjaxSource”: “./server_processing.php”, /*如果加上下面這段內(nèi)容，則使用post方式傳遞數(shù)據(jù) “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傳遞數(shù)據(jù) } ); } );

示例：http://www.guoxk.com/html/DataTables/ajax-serverSide.html

21、為每行加載id和class

服務(wù)器端返回?cái)?shù)據(jù)的格式： { “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、為每行顯示細(xì)節(jié)，點(diǎn)擊行開頭的“+”號(hào)展開細(xì)節(jié)顯示

示例：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

?更過參考：

要注意的是，要被dataTable處理的table對(duì)象，必須有thead與tbody，而且，結(jié)構(gòu)要規(guī)整（數(shù)據(jù)不一定要完整），這樣才能正確處理。

以下是在進(jìn)行dataTable綁定處理時(shí)候可以附加的參數(shù)：

屬性名稱	取值范圍	解釋
bAutoWidth	true or false, default true	是否自動(dòng)計(jì)算表格各列寬度
bDeferRender	true or false, default false	用于渲染的一個(gè)參數(shù)
bFilter	true or false, default true	開關(guān)，是否啟用客戶端過濾功能
bInfo	true or false, default true	開關(guān)，是否顯示表格的一些信息
bJQueryUI	true or false, default false	是否使用jquery ui themeroller的風(fēng)格
bLengthChange	true or false, default true	開關(guān)，是否顯示一個(gè)每頁長度的選擇條（需要分頁器支持）
bPaginate	true or false, default true	開關(guān)，是否顯示（使用）分頁器
bProcessing	true or false, defualt false	開關(guān)，以指定當(dāng)正在處理數(shù)據(jù)的時(shí)候，是否顯示“正在處理”這個(gè)提示信息
bScrollInfinite	true or false, default false	開關(guān)，以指定是否無限滾動(dòng)（與sScrollY配合使用），在大數(shù)據(jù)量的時(shí)候很有用。當(dāng)這個(gè)標(biāo)志為true的時(shí)候，分頁器就默認(rèn)關(guān)閉
bSort	true or false, default true	開關(guān)，是否讓各列具有按列排序功能
bSortClasses	true or false, default true	開關(guān)，指定當(dāng)當(dāng)前列在排序時(shí)，是否增加classes 'sorting_1', 'sorting_2' and 'sorting_3'，打開后，在處理大數(shù)據(jù)時(shí)，性能有所損失
bStateSave	true or false, default false	開關(guān)，是否打開客戶端狀態(tài)記錄功能。這個(gè)數(shù)據(jù)是記錄在cookies中的，打開了這個(gè)記錄后，即使刷新一次頁面，或重新打開瀏覽器，之前的狀態(tài)都是保存下來的
sScrollX	'disabled' or? '100%' 類似的字符串	是否開啟水平滾動(dòng)，以及指定滾動(dòng)區(qū)域大小
sScrollY	'disabled' or '200px' 類似的字符串	是否開啟垂直滾動(dòng)，以及指定滾動(dòng)區(qū)域大小
--	--	--
選項(xiàng)	?	?
aaSorting	array array[int,string], 如[], [[0,'asc'], [0,'desc']]	指定按多列數(shù)據(jù)排序的依據(jù)
aaSortingFixed	同上	同上。唯一不同點(diǎn)是不能被用戶的自定義配置沖突
aLengthMenu	default [10, 25, 50, 100]，可以為一維數(shù)組，也可為二維數(shù)組，比如：[[10, 25, 50, -1], [10, 25, 50, "All"]]	這個(gè)為選擇每頁的條目數(shù)，當(dāng)使用一個(gè)二維數(shù)組時(shí)，二維層面只能有兩個(gè)元素，第一個(gè)為顯示每頁條目數(shù)的選項(xiàng)，第二個(gè)是關(guān)于這些選項(xiàng)的解釋
aoSearchCols	default null, 類似：[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}]	給每個(gè)列單獨(dú)定義其初始化搜索列表特性（這一塊還沒搞懂）
asStripClasses	default ['odd', 'even'], 比如['strip1', 'strip2', 'strip3']	指定要被應(yīng)用到各行的class風(fēng)格，會(huì)自動(dòng)循環(huán)
bDestroy	true or false, default false	用于當(dāng)要在同一個(gè)元素上執(zhí)行新的dataTable綁定時(shí)，將之前的那個(gè)數(shù)據(jù)對(duì)象清除掉，換以新的對(duì)象設(shè)置
bRetrieve	true or false, default false	用于指明當(dāng)執(zhí)行dataTable綁定時(shí)，是否返回DataTable對(duì)象
bScrollCollapse	true or false, default false	指定適當(dāng)?shù)臅r(shí)候縮起滾動(dòng)視圖
bSortCellsTop	true or false, default false	（未知的東東）
iCookieDuration	整數(shù)，默認(rèn)7200，單位為秒	指定用于存儲(chǔ)客戶端信息到cookie中的時(shí)間長度，超過這個(gè)時(shí)間后，自動(dòng)過期
iDeferLoading	整數(shù)，默認(rèn)為null	延遲加載，它的參數(shù)為要加載條目的數(shù)目，通常與bServerSide，sAjaxSource等配合使用
iDisplayLength	整數(shù)，默認(rèn)為10	用于指定一屏顯示的條數(shù)，需開啟分頁器
iDisplayStart	整數(shù)，默認(rèn)為0	用于指定從哪一條數(shù)據(jù)開始顯示到表格中去
iScrollLoadGap	整數(shù)，默認(rèn)為100	用于指定當(dāng)DataTable設(shè)置為滾動(dòng)時(shí)，最多可以一屏顯示多少條數(shù)據(jù)
oSearch	默認(rèn){ "sSearch": "", "bRegex": false, "bSmart": true }	又是初始時(shí)指定搜索參數(shù)相關(guān)的，有點(diǎn)復(fù)雜，沒搞懂目前
sAjaxDataProp	字符串，default 'aaData'	指定當(dāng)從服務(wù)端獲取表格數(shù)據(jù)時(shí)，數(shù)據(jù)項(xiàng)使用的名字
sAjaxSource	URL字符串，default null	指定要從哪個(gè)URL獲取數(shù)據(jù)
sCookiePrefix	字符串，default 'SpryMedia_DataTables_'	當(dāng)打開狀態(tài)存儲(chǔ)特性后，用于指定存儲(chǔ)在cookies中的字符串的前綴名字
sDom	default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)	這是用于定義DataTable布局的一個(gè)強(qiáng)大的屬性，另開專門文檔來補(bǔ)充說明吧
sPaginationType	'full_numbers' or 'two_button', default 'two_button'	用于指定分頁器風(fēng)格
sScrollXInner	string default 'disabled'	又是水平滾動(dòng)相關(guān)的，沒搞懂啥意思

DataTable支持如下回調(diào)函數(shù)?

回調(diào)函數(shù)名稱	參數(shù)	返回值	默認(rèn)	功能
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	當(dāng)每次cookies改變時(shí)，會(huì)觸發(fā)這個(gè)函數(shù)調(diào)用
fnDrawCallback	無	無	無	在每次table被draw完后調(diào)用，至于做什么就看著辦吧
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	無	無	用于在每次重畫的時(shí)候修改表格的腳部
fnFormatNumber	1.int : number to be formatted	String : formatted string for DataTables to show the number	有默認(rèn)的	用于在大數(shù)字上，自動(dòng)加入一些逗號(hào)，分隔開
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發(fā)生時(shí)，修改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.	無	用于傳達(dá)table信息
fnInitComplete	1.object:oSettings - DataTables settings object	無	無	表格初始化完成后調(diào)用
fnPreDrawCallback	1.object:oSettings - DataTables settings object	Boolean	無	用于在開始繪制之前調(diào)用，返回false的話，會(huì)阻止draw事件發(fā)生；返回其它值，draw可以順利執(zhí)行
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	無	當(dāng)創(chuàng)建了行，但還未繪制到屏幕上的時(shí)候調(diào)用，通常用于改變行的class風(fēng)格
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	用于替換默認(rèn)發(fā)到服務(wù)端的請(qǐng)求操作
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中的數(shù)據(jù)被加載前執(zhí)行，可以方便地修改這些數(shù)據(jù)
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	無	在狀態(tài)數(shù)據(jù)被存儲(chǔ)到cookies前執(zhí)行，可以方便地做一些預(yù)操作

?

注：

手動(dòng)刷新數(shù)據(jù)時(shí)，數(shù)據(jù)累加不重新加載問題解決辦法：

var oTableTemp=$('#'+tableId).dataTable({"bDestroy":true});
oTableTemp.fnClearTable(); oTableTemp=$('#'+tableId).dataTable({"bDestroy":true});

?

?

轉(zhuǎn)自：http://www.cnblogs.com/jobs2/p/3431567.html

文檔：http://legacy.datatables.net/usage/options

轉(zhuǎn)載于:https://www.cnblogs.com/gisblogs/p/4863101.html

總結(jié)

以上是生活随笔為你收集整理的Jquery_JQuery之DataTables强大的表格解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。