DataTables 控件使用和心得 (2) - 參數Options中文說明

在之前的文章中提及Datatable的參數通常都是英文的,今天分享一下Datatable參數的中文說明,以及詳細使用。css

什麼是DataTables參數(Options)

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

1正則表達式

2算法

3json

4數組

5服務器

6dom

$('#example'ide

).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

 

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

相關文章
相關標籤/搜索