jquery datatables 的 配置參數

 在以前的文章中說起Datatable的參數一般都是英文的，今天分享一下Datatable參數的中文說明，以及詳細使用。

什麼是DataTables參數(Options)

上篇我們說了,DataTables控件的加載函數dataTable()一般都有一個對象參數,這個對象參數就是整個DataTables控件的參數(Options),通過定義這個參數中的各種屬性,來靈活控制DataTable的初始效果. 樣例代碼如下:

$('#example'

).dataTable({

   “option1”:value1,

   “option2”:value2,

   …

});

官方文檔地址: http://datatables.net/reference/option/

下面是一些常用的參數列表,比較常用或者有價值的標示爲綠色.

功能參數(Features)

參數名	說明	參考值	默認值
autoWidth	定義是否由控件自動控制列寬	Boolean	true
deferRender	定義在render時是否僅僅render顯示的dom,在顯示大量數據的情況下強烈建議設爲true,顯示少量數據或者真翻頁方案可以設爲false,注意在設爲true時無法通過函數獲取所有行的dom對象—因爲它們並不存在.	Boolean	false
info	控制總數信息(標準界面右下角顯示總數和過濾條數的控件)的顯隱	Boolean	true
lengthChange	控制是否能夠調整每頁的條數,如果設爲false,標準的每頁條數控制控件也會被隱藏.	Boolean	true
ordering	全局控制列表的所有排序功能.	Boolean	true
paging	全局控制列表的翻頁功能,如果設爲false,所有的默認翻頁控件會被隱藏	Boolean	true
processing	控制是否在數據加載時出現”Processing”的提示,一般在遠程加載並且比較慢的情況下才會出現. 樣式需要定義,否則比較醜.	Boolean	false
scrollX	控制在列過多過寬是,是否出現水平滾動條.注意使用這個參數時最好關閉響應式設計	Boolean	false
scrollY	定義一個高度,當列表內容超過這個高度時,顯示垂直滾動條,這個高度不算表頭和翻頁搜索等工具條的空間.支持數字或者css寫法比如: 200或者’200px’	Number /   String	無
searching	控制控件的搜索功能,如果爲false,控件的搜索功能被完全禁用,而且默認搜索組件會被隱藏.	Boolean	true
serverSide	當設爲true時,列表的過濾,搜索和排序信息會傳遞到Server端進行處理,實現真翻頁方案的必需屬性.反之,所有的列表功能都在客戶端計算並執行	Boolean	false

 

 

數據參數(Data)

參數名	說明	參考值
data	以Javascript數組對象方式設定列表顯示數據	數組對象
ajax	String模式: 直接傳入一個string作爲遠程ajax請求路徑	String
	對象模式: 支持JQuery.ajax函數的參數設置,支持type,url等標準參數. 例如: $('#example').dataTable( { "ajax": {     "url": url,     "type": "POST"    } } );	JQuery ajax 函數對應參數
ajax.data	和標準JQuery.ajax的data參數作用類似,但效果有所不同.僅當serverSide參數爲true的時候,參數屬性纔有意義,當serverSide開啓,DataTables組件會自行封裝一個信息類發送給服務端,而ajax.data僅僅是對這個信息類進行調整和添加.   添加方式, ajax.data可以直接賦值一個對象,這個對象的屬性會添加到原信息類裏面去一起發送到服務端.例如:   $('#example').dataTable( {     "ajax": {       "url": "data.json",       "data": {           "user_id": 451     }   } } );   另外一種選擇是傳入一個方法,方法的參數就是當前發送到服務器的信息類,在方法中可以修改這個信息類.   $('#example').dataTable( {   "ajax": {     "url": "data.json",     "data": function ( d ) {         d.extra_search = $('#extra').val();     }   } } );	對象或者方法
ajax.dataSrc	定義服務器返回對象裏面保存數據的屬性名稱,默認爲data,也即是說,在返回的Json數據中,所有列表數據保存在data屬性中,這個屬性不太建議修改.

配置參數(Options)

參數名	說明	參考值	默認值
deferLoading	這個參數只有在ServerSide爲Ture的時候纔有作用,主要是針對列表已經通過HTML顯示了一部分數據,而通知遠程加載可以忽略這部分數據,在實際使用中這種情況並不常見.	Number   /Array	false
destroy	設爲ture時通知dataTable函數完全重新建立一個新的控件實例,在一個頁面內反覆對同一個控件加載dataTable函數並且想重新建立控件時使用.	Boolean	false
displayStart	列表初始顯示的行索引,根據給出的行索引會自動翻頁,比如一個每頁10個的列表,那麼給出20可以讓其翻到第二頁	Number	無
dom	比較複雜的配置項,簡言之就是通過一個自定義的字符串來定義DataTables裏面所有組件的顯示,位置和顯隱. 具體請詳見: http://datatables.net/reference/option/dom	String	“lfrtip”
lengthMenu	定義頁面長度組件裏面的選項.	Array	[ 10, 25,   50]
orderCellsTop	當然表頭有多層td組成的時候,必須定義哪一個td的數據用於排序,false表示底部td,true表示頂部td. 比如以下情況:                             1       2.1       2.2      true的時候排序會用2.1, false的時候排序會用2.2.	Boolean	false
orderClasses	定義是否排序的列進行高亮顯示	Boolean	true
order	定義列表的初始排序設定,爲一個2維數組,子數組包括2個值,列索引和排序方向(asc/desc): 例如 "order": [[ 0, 'asc' ], [ 1, 'asc' ]]	Array	[[0, 'asc']]
orderMulti	控制是否支持多重排序,如果爲true,可以通過shift+點擊列頭實現多重排序,或者通過API實現,否則禁用該功能.	Boolean	true
orderFixed	自定義固定的排序策略,該策略在任何排序操作中總是起效.可以通過對一個列的固定排序(可以是隱藏的列)來定義列表默認的排序策略. 數組方式,定義優先排序策略,如: "orderFixed": [ 0, 'asc' ] 該參數說明無論如何排序,永遠先進行第一列的正向排序. 對象方式,可以利用關鍵字pre或post來定義這個規則是優先生效還是置後生效. "orderFixed": {           "pre": [ 0, 'asc' ],           "post": [ 1, 'asc' ]     }	Array/Object	無
pageLength	定義初始的頁長	Number	10
pagingType	定義翻頁組件的樣式(有4個選擇): simple -  只有上一頁和下一頁2個按鈕 simple_numbers   – 上一頁,下一頁和頁碼 full – 首頁,末頁,上一頁,下一頁4個按鈕 full_numbers   – 全部按鈕和頁面	String	simple_numbers
scrollCollapse	在設置了一定的scrollY值後起效,爲true時,當列表內容不足以撐滿scrollY的設定值時,列表高度會自動適應內容.	Boolean	false
search	定義列表的初始搜索/過濾條件 Search對象可以有以下屬性:	Object	無
search.search	過濾字符串,注意在默認設置下,所有列的數據都會參與過濾.比如當這個屬性爲”a”的時候,任何一個列只要包含”a”的行就會被顯示.爲空表示全部	String	無
search.caseInsensitive	搜索是是否忽略大小寫,true爲忽略	Boolean	true
search.regex	定義搜索字符串是否爲一個正則表達式	Boolean	fasle
search.smart	禁用獲取啓用DataTables控件內置的只能過濾算法,這個算法會把搜索字符串進行分割並只能搜索,關閉這個算法僅僅實現簡單的字符串查找,false爲關閉	Boolean	true
searchCols	分別定義每個列的過濾條件.該參數是一個對象數組,每個對象有2個屬性: search: 搜索字符串 escapeRegex:   是否是正則表達式 注意不需要設置過濾的列也需要用null佔位,比如: "searchCols": [     null,     {   "search": "My filter" },     null,     {   "search": "^[0-9]", "escapeRegex": false }   ]	Array	無
stripeClasses	定義一個字符串數組,在顯示行的時候依次使用裏面的字符串作爲行的class	Array	‘odd’ & ‘even’

列定義參數(Columns)

參數名	說明	參考值	默認值
columns	列的初始狀態的定義,該參數一個是對象數組,每一個對象元素定義一個列.注意,不需定義的列也必須以null佔位,比如: "columns": [     {   "searchable": false },     null, null  ]	Array	無
columnDefs	和columns設置非常類似,但可以通過targets屬性可以根據靈活的選擇需要設定的列.比columns更加靈活.比如: "columnDefs": [ {         "targets": 0,         "searchable": false } ] targets可以有多種寫法: 0或者正整數(可用數組): 表示正向列的索引 負數(可用數組): 表示反向列的索引 字符串: 匹配th的class來選擇列. "_all":   所有列,也是默認值.
columns.data	列的數據名,對應數據裏面的屬性名	String	無
columns.name	給列設置獨立的名稱,目前看意義不大	String	無
columns.orderable	設置列是否允許排序	Boolean	true
columns.searchable	設置列是否允許過濾	Boolean	true
columns.type	通過設置列的類型讓控件在排序和過濾這個列是能更好的處理這個列的數據,比如日期,貨幣等.具體種類很多請參考這裏: http://datatables.net/reference/option/columns.type	String	無
columns.visible	設置列的可見性,true爲顯示	Boolean	true
columns.width	強行設置列的寬度,支持數字和任何CSS寫法,比如20%.	String	無
columns.render	非常有用的函數,自定義列的內容.該屬性比較常見的用法是函數用法,通過這個函數可以自定義改造列的任何內容,如果要在列中顯示比較複雜的內容,這是一個比較好的選擇.比如在列中加入功能按鈕. 例如: "render": function ( data, type, row,   meta ) {       return   '<a href="'+data+'">Download</a>'; } 4個屬性的意思是: data : 當前單元格的數據 type: 當前列的類型 row: 當前行完整的數據對象 meta: 爲一個子對象,包含3個屬性    row: 當前行的索引    col: 當前列的索引    settings: 當前DataTables控件的setttings對象	Function	無

 

可以看到,DataTables的Options設置還是比較全面和豐富的,當然Options僅僅能在控件初始化的時候對控件進行控制和影響,如果要在控件使用過程中對它進行控制和變化,就需要用到DataTables的函數庫(API).這個我們將在下一篇文章中討論.