JQuery之DataTables強大的表格解決方案

一、DataTables的默認配置

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

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

二、DataTables的一些基礎屬性配置

「bPaginate」: true, //翻頁功能 「bLengthChange」: true, //改變每頁顯示數據數量 「bFilter」: true, //過濾功能 「bSort」: false, //排序功能 「bInfo」: true,//頁腳信息 「bAutoWidth」: true//自動寬度

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

三、數據排序

$(document).ready(function() { $(‘#example’).dataTable( { 「aaSorting」: [ [ 4, "desc" ] ] } ); } ); 從第0列開始，以第4列倒序排列

示例：http://www.guoxk.com/html/DataTables/Sorting-data.html

四、多列排序

示例：http://www.guoxk.com/html/DataTables/Multi-column-sorting.html

 

五、隱藏某些列

$(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

六、改變頁面上元素的位置

$(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

七、狀態保存，使用了翻頁或者改變了每頁顯示數據數量，會保存在cookie中，下回訪問時會顯示上一次關閉頁面時的內容。

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

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

八、顯示數字的翻頁樣式

$(document).ready(function() { $(‘#example’).dataTable( { 「sPaginationType」: 「full_numbers」 } ); } );

示例：http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html

九、水平限制寬度

$(document).ready(function() { $(‘#example’).dataTable( { 「sScrollX」: 「100%」, 「sScrollXInner」: 「110%」, 「bScrollCollapse」: true } ); } );

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

十、垂直限制高度

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

十一、水平和垂直兩個方向共同限制

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

十二、改變語言

$(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

1三、click事件

示例：http://www.guoxk.com/html/DataTables/event-click.html

14/配合使用tooltip插件

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

1五、定義每頁顯示數據數量

$(document).ready(function() { $(‘#example’).dataTable( { 「aLengthMenu」: [[10, 25, 50, -1], [10, 25, 50, "All"]] } ); } );

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

1六、row callback

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

最後一列的值若是爲「A」則加粗顯示

1七、排序控制

$(document).ready(function() { $(‘#example’).dataTable( { 「aoColumns」: [ null, { "asSorting": [ "asc" ] }, { 「asSorting」: [ "desc", "asc", "asc" ] }, { 「asSorting」: [ ] }, { 「asSorting」: [ ] } ] } ); } );

示例：http://www.guoxk.com/html/DataTables/sort.html
說明：第一列點擊按默認狀況排序，第二列點擊已順序排列，第三列點擊一次倒序，二三次順序，第四五列點擊不實現排序

1八、從配置文件中讀取語言包

$(document).ready(function() { $(‘#example’).dataTable( { 「oLanguage」: { 「sUrl」: 「cn.txt」 } } ); } );

1九、是用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

2一、爲每行加載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

2二、爲每行顯示細節，點擊行開頭的「+」號展開細節顯示

示例：http://www.guoxk.com/html/DataTables/with-row-information.html

 

2三、選擇多行

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

2二、集成jQuery插件jEditable

示例：http://www.guoxk.com/html/DataTables/jEditable-integration.html

 更過參考：

要注意的是，要被dataTable處理的table對象，必須有thead與tbody，並且，結構要規整（數據不必定要完整），這樣才能正確處理。

如下是在進行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前執行，能夠方便地作一些預操做