什么是DataTables參數(shù)(Options)
上篇我們說了,DataTables控件的加載函數(shù)dataTable()一般都有一個(gè)對(duì)象參數(shù),這個(gè)對(duì)象參數(shù)就是整個(gè)DataTables控件的參數(shù)(Options),通過定義這個(gè)參數(shù)中的各種屬性,來靈活控制DataTable的初始效果. 樣例代碼如下:
$('#example').dataTable({ “option1”:value1, “option2”:value2, …});
官方文檔地址:
http://datatables.net/reference/option/下面是一些常用的參數(shù)列表,比較常用或者有價(jià)值的標(biāo)示為綠色.
功能參數(shù)(Features)
參數(shù)名
說明
參考值
默認(rèn)值
autoWidth
定義是否由控件自動(dòng)控制列寬
Boolean
true
deferRender
定義在render時(shí)是否僅僅render顯示的dom,在顯示大量數(shù)據(jù)的情況下強(qiáng)烈建議設(shè)為true,顯示少量數(shù)據(jù)或者真翻頁方案可以設(shè)為false,注意在設(shè)為true時(shí)無法通過函數(shù)獲取所有行的dom對(duì)象—因?yàn)樗鼈儾⒉淮嬖?
Boolean
false
info
控制總數(shù)信息(標(biāo)準(zhǔn)界面右下角顯示總數(shù)和過濾條數(shù)的控件)的顯隱
Boolean
true
lengthChange
控制是否能夠調(diào)整每頁的條數(shù),如果設(shè)為false,標(biāo)準(zhǔn)的每頁條數(shù)控制控件也會(huì)被隱藏.
Boolean
true
ordering
全局控制列表的所有排序功能.
Boolean
true
paging
全局控制列表的翻頁功能,如果設(shè)為false,所有的默認(rèn)翻頁控件會(huì)被隱藏
Boolean
true
processing
控制是否在數(shù)據(jù)加載時(shí)出現(xiàn)”Processing”的提示,一般在遠(yuǎn)程加載并且比較慢的情況下才會(huì)出現(xiàn). 樣式需要定義,否則比較丑.
Boolean
false
scrollX
控制在列過多過寬是,是否出現(xiàn)水平滾動(dòng)條.注意使用這個(gè)參數(shù)時(shí)最好關(guān)閉響應(yīng)式設(shè)計(jì)
Boolean
false
scrollY
定義一個(gè)高度,當(dāng)列表內(nèi)容超過這個(gè)高度時(shí),顯示垂直滾動(dòng)條,這個(gè)高度不算表頭和翻頁搜索等工具條的空間.支持?jǐn)?shù)字或者css寫法比如:
200或者’200px’
Number / String
無
searching
控制控件的搜索功能,如果為false,控件的搜索功能被完全禁用,而且默認(rèn)搜索組件會(huì)被隱藏.
Boolean
true
serverSide
當(dāng)設(shè)為true時(shí),列表的過濾,搜索和排序信息會(huì)傳遞到Server端進(jìn)行處理,實(shí)現(xiàn)真翻頁方案的必需屬性.反之,所有的列表功能都在客戶端計(jì)算并執(zhí)行
Boolean
false
數(shù)據(jù)參數(shù)(Data)
參數(shù)名
說明
參考值
data
以Javascript數(shù)組對(duì)象方式設(shè)定列表顯示數(shù)據(jù)
數(shù)組對(duì)象
ajax
String模式: 直接傳入一個(gè)string作為遠(yuǎn)程ajax請(qǐng)求路徑
String
對(duì)象模式: 支持JQuery.ajax函數(shù)的參數(shù)設(shè)置,支持type,url等標(biāo)準(zhǔn)參數(shù). 例如:
$('#example').dataTable( {
"ajax": {
"url": url,
"type": "POST"
}
} );
JQuery ajax 函數(shù)對(duì)應(yīng)參數(shù)
ajax.data
和標(biāo)準(zhǔn)JQuery.ajax的data參數(shù)作用類似,但效果有所不同.僅當(dāng)serverSide參數(shù)為true的時(shí)候,參數(shù)屬性才有意義,當(dāng)serverSide開啟,DataTables組件會(huì)自行封裝一個(gè)信息類發(fā)送給服務(wù)端,而ajax.data僅僅是對(duì)這個(gè)信息類進(jìn)行調(diào)整和添加.
添加方式, ajax.data可以直接賦值一個(gè)對(duì)象,這個(gè)對(duì)象的屬性會(huì)添加到原信息類里面去一起發(fā)送到服務(wù)端.例如:
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": {
"user_id": 451
}
}
} );
另外一種選擇是傳入一個(gè)方法,方法的參數(shù)就是當(dāng)前發(fā)送到服務(wù)器的信息類,在方法中可以修改這個(gè)信息類.
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": function ( d ) {
d.extra_search = $('#extra').val();
}
}
} );
對(duì)象或者方法
ajax.dataSrc
定義服務(wù)器返回對(duì)象里面保存數(shù)據(jù)的屬性名稱,默認(rèn)為data,也即是說,在返回的Json數(shù)據(jù)中,所有列表數(shù)據(jù)保存在data屬性中,這個(gè)屬性不太建議修改.
配置參數(shù)(Options)
參數(shù)名
說明
參考值
默認(rèn)值
deferLoading
這個(gè)參數(shù)只有在ServerSide為Ture的時(shí)候才有作用,主要是針對(duì)列表已經(jīng)通過HTML顯示了一部分?jǐn)?shù)據(jù),而通知遠(yuǎn)程加載可以忽略這部分?jǐn)?shù)據(jù),在實(shí)際使用中這種情況并不常見.
Number /Array
false
destroy
設(shè)為ture時(shí)通知dataTable函數(shù)完全重新建立一個(gè)新的控件實(shí)例,在一個(gè)頁面內(nèi)反復(fù)對(duì)同一個(gè)控件加載dataTable函數(shù)并且想重新建立控件時(shí)使用.
Boolean
false
displayStart
列表初始顯示的行索引,根據(jù)給出的行索引會(huì)自動(dòng)翻頁,比如一個(gè)每頁10個(gè)的列表,那么給出20可以讓其翻到第二頁
Number
無
dom
比較復(fù)雜的配置項(xiàng),簡(jiǎn)言之就是通過一個(gè)自定義的字符串來定義DataTables里面所有組件的顯示,位置和顯隱.
具體請(qǐng)?jiān)斠?
http://datatables.net/reference/option/dom
String
“l(fā)frtip”
lengthMenu
定義頁面長(zhǎng)度組件里面的選項(xiàng).
Array
[ 10, 25, 50]
orderCellsTop
當(dāng)然表頭有多層td組成的時(shí)候,必須定義哪一個(gè)td的數(shù)據(jù)用于排序,false表示底部td,true表示頂部td. 比如以下情況:
1
2.1
2.2
true的時(shí)候排序會(huì)用2.1, false的時(shí)候排序會(huì)用2.2.
Boolean
false
orderClasses
定義是否排序的列進(jìn)行高亮顯示
Boolean
true
order
定義列表的初始排序設(shè)定,為一個(gè)2維數(shù)組,子數(shù)組包括2個(gè)值,列索引和排序方向(asc/desc): 例如
"order": [[ 0, 'asc' ], [ 1, 'asc' ]]
Array
[[0, 'asc']]
orderMulti
控制是否支持多重排序,如果為true,可以通過shift+點(diǎn)擊列頭實(shí)現(xiàn)多重排序,或者通過API實(shí)現(xiàn),否則禁用該功能.
Boolean
true
orderFixed
自定義固定的排序策略,該策略在任何排序操作中總是起效.可以通過對(duì)一個(gè)列的固定排序(可以是隱藏的列)來定義列表默認(rèn)的排序策略.
數(shù)組方式,定義優(yōu)先排序策略,如:
"orderFixed": [ 0, 'asc' ]
該參數(shù)說明無論如何排序,永遠(yuǎn)先進(jìn)行第一列的正向排序.
對(duì)象方式,可以利用關(guān)鍵字pre或post來定義這個(gè)規(guī)則是優(yōu)先生效還是置后生效.
"orderFixed": {
"pre": [ 0, 'asc' ],
"post": [ 1, 'asc' ]
}
Array/Object
無
pageLength
定義初始的頁長(zhǎng)
Number
10
pagingType
定義翻頁組件的樣式(有4個(gè)選擇):
simple - 只有上一頁和下一頁2個(gè)按鈕
simple_numbers – 上一頁,下一頁和頁碼
full – 首頁,末頁,上一頁,下一頁4個(gè)按鈕
full_numbers – 全部按鈕和頁面
String
simple_numbers
scrollCollapse
在設(shè)置了一定的scrollY值后起效,為true時(shí),當(dāng)列表內(nèi)容不足以撐滿scrollY的設(shè)定值時(shí),列表高度會(huì)自動(dòng)適應(yīng)內(nèi)容.
Boolean
false
search
定義列表的初始搜索/過濾條件
Search對(duì)象可以有以下屬性:
Object
無
search.search
過濾字符串,注意在默認(rèn)設(shè)置下,所有列的數(shù)據(jù)都會(huì)參與過濾.比如當(dāng)這個(gè)屬性為”a”的時(shí)候,任何一個(gè)列只要包含”a”的行就會(huì)被顯示.為空表示全部
String
無
search.caseInsensitive
搜索是是否忽略大小寫,true為忽略
Boolean
true
search.regex
定義搜索字符串是否為一個(gè)正則表達(dá)式
Boolean
fasle
search.smart
禁用獲取啟用DataTables控件內(nèi)置的只能過濾算法,這個(gè)算法會(huì)把搜索字符串進(jìn)行分割并只能搜索,關(guān)閉這個(gè)算法僅僅實(shí)現(xiàn)簡(jiǎn)單的字符串查找,false為關(guān)閉
Boolean
true
searchCols
分別定義每個(gè)列的過濾條件.該參數(shù)是一個(gè)對(duì)象數(shù)組,每個(gè)對(duì)象有2個(gè)屬性:
search: 搜索字符串
escapeRegex: 是否是正則表達(dá)式
注意不需要設(shè)置過濾的列也需要用null占位,比如:
"searchCols": [
null,
{ "search": "My filter" },
null,
{ "search": "^[0-9]", "escapeRegex": false }
]
Array
無
stripeClasses
定義一個(gè)字符串?dāng)?shù)組,在顯示行的時(shí)候依次使用里面的字符串作為行的class
Array
‘odd’ & ‘even’
列定義參數(shù)(Columns)
參數(shù)名
說明
參考值
默認(rèn)值
columns
列的初始狀態(tài)的定義,該參數(shù)一個(gè)是對(duì)象數(shù)組,每一個(gè)對(duì)象元素定義一個(gè)列.注意,不需定義的列也必須以null占位,比如:
"columns": [
{ "searchable": false },
null,
null
]
Array
無
columnDefs
和columns設(shè)置非常類似,但可以通過targets屬性可以根據(jù)靈活的選擇需要設(shè)定的列.比columns更加靈活.比如:
"columnDefs": [ {
"targets": 0,
"searchable": false
} ]
targets可以有多種寫法:
0或者正整數(shù)(可用數(shù)組): 表示正向列的索引
負(fù)數(shù)(可用數(shù)組): 表示反向列的索引
字符串: 匹配th的class來選擇列.
"_all": 所有列,也是默認(rèn)值.
columns.data
列的數(shù)據(jù)名,對(duì)應(yīng)數(shù)據(jù)里面的屬性名
String
無
columns.name
給列設(shè)置獨(dú)立的名稱,目前看意義不大
String
無
columns.orderable
設(shè)置列是否允許排序
Boolean
true
columns.searchable
設(shè)置列是否允許過濾
Boolean
true
columns.type
通過設(shè)置列的類型讓控件在排序和過濾這個(gè)列是能更好的處理這個(gè)列的數(shù)據(jù),比如日期,貨幣等.具體種類很多請(qǐng)參考這里:
http://datatables.net/reference/option/columns.type
String
無
columns.visible
設(shè)置列的可見性,true為顯示
Boolean
true
columns.width
強(qiáng)行設(shè)置列的寬度,支持?jǐn)?shù)字和任何CSS寫法,比如20%.
String
無
columns.render
非常有用的函數(shù),自定義列的內(nèi)容.該屬性比較常見的用法是函數(shù)用法,通過這個(gè)函數(shù)可以自定義改造列的任何內(nèi)容,如果要在列中顯示比較復(fù)雜的內(nèi)容,這是一個(gè)比較好的選擇.比如在列中加入功能按鈕.
例如:
"render": function ( data, type, row, meta ) {
return '<a href="'+data+'">Download</a>';
}
4個(gè)屬性的意思是:
data : 當(dāng)前單元格的數(shù)據(jù)
type: 當(dāng)前列的類型
row: 當(dāng)前行完整的數(shù)據(jù)對(duì)象
meta: 為一個(gè)子對(duì)象,包含3個(gè)屬性
row: 當(dāng)前行的索引
col: 當(dāng)前列的索引
settings: 當(dāng)前DataTables控件的setttings對(duì)象
Function
無
可以看到,DataTables的Options設(shè)置還是比較全面和豐富的,當(dāng)然Options僅僅能在控件初始化的時(shí)候?qū)丶M(jìn)行控制和影響,如果要在控件使用過程中對(duì)它進(jìn)行控制和變化,就需要用到DataTables的函數(shù)庫(API).這個(gè)我們將在下一篇文章中討論.
