dataTable 參數說明

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

功能參數(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).