這個是我在學習DataTables時參考官方1.10.20的文檔寫的一些理解,在這裏分享給大家,如果理解有誤,歡迎大家在評論區留言.
該文檔是用yaml文件,所以大家可以用其它支持yaml的編輯器打開查看或者轉成json格式,但是注意json格式不支持註釋,所以不建議.
如果只需要DataTables核心功能,只要看前600行就好,如果需要官方擴展的可以參考後600行的部分內容.當然有些部分可能是歷史版本的參數,這裏並沒有記錄
%YAML 1.2 # v1.10.20
---
Features:
autoWidth: # 允許或禁用自動列寬計算.
default: true
type: boolean
deferRender: # 功能控制延遲渲染以提高初始化速度.
default: false
type: boolean
info: # 功能控制表信息顯示字段,一般位於左下角.
default: true
type: boolean
lengthChange: # 功能控制最終用戶更改表的分頁顯示長度的能力.若禁用分頁功能,則此功能設置無效
default: true
type: boolean
ordering: # 功能控制DataTables的排序功能
default: true
type: boolean
paging: # 允許或禁用表格分頁功能
default: true
type: boolean
processing: # 允許或禁用處理狀態(例如大量數據的排序)的顯示(language.processing)
default: false
type: boolean
scroolX: # 設置橫向滾動,允許設置布爾值,任意css單位或數字(當做像素)
default: false
type: boolean
scroolY: # 設置縱向滾動,允許設置任意css單位或數字(當做像素),此高度是table的body的高度,不包含表頭和表尾.
default: ''
type: string
searching: # 允許或禁用DataTables的搜索能力
default: true
type: boolean
serverSide: # 啓用DataTables服務端模式,默認是客戶端模式,搜索(過濾),分頁,排序在瀏覽器中完成
default: false
type: boolean
stateSave: # 狀態保存,在表重新加載時恢復表的狀態
default: false
type: boolean
Data:
ajax: # 從Ajax源加載表內容的數據
- type: string
description: 設置加載數據的URL
- type: object
description: 將參數傳遞給JQuery.ajax,不過有些參數和ajax不一樣
data: # 根據Ajax請求添加或修改提交給服務器的數據
- type: object
description: 作爲對象使用時可以傳遞一些靜態參數的值,如果傳遞的參數是動態的,請使用下面的函數形式.
- type: function
parameters:
- name: data
type: object
description: 傳遞給服務端的原始參數
- name: settings
type: object
description: 從1.10.6開始有了DataTables settings作爲參數
dataSrc: # 讀取從服務器返回的數據,選擇表格的數據源,默認值是字符串data
- type: string
default: 'data'
description: 定義要讀取的對象的屬性,默認值是data,如果返回的是數組則是空字符串,如果返回的層級較多可以使用(.)調用
- type: function
description: 作爲函數只有一個參數,就是服務器返回的json數據,函數返回的值就是數據源,數據源必須是數組類型的
parameters:
- name: data
type: object
description: ajax請求後從服務端返回的數據
Notes: # 此選項說明一些與jQuery.ajax不一樣的需要注意的地方
- data: ajax.data. 與jQuery.ajax一樣可以作爲對象傳遞數據,DataTables將它拓展可爲函數
- dataSrc: ajax.dataSrc. 用來指定返回的數據集
- success: 不要使用success,因爲它在DataTables內部使用,如果想操作或修改服務端返回的數據,請使用ajax.dataSrc或ajax的函數形式,但是其它的回調監聽函數可以繼續使用
- type: function
parameters:
- name: data
type: object
description: 發送給服務器的數據
- name: callback
type: function
description: 獲取所需數據後必須執行的回調函數。該數據應作爲唯一參數傳遞到回調中
- name: settings
type: DataTables.Settings
description: DataTables設置對象
data:
type: array
description: 用作表初始化的數據,會覆蓋table中的DOM數據。data數組中的可以是數組或對象(如果指定了columns.data)
Callbacks:
createdRow:
description: 當table的body中插入tr時執行的回調,當使用deferRender或serverSide時非常有用,你可以添加事件,類名信息或在創建行時對其進行初始化
type: function
parameters:
- name: row
type: node
description: tr標籤,剛創建的行元素
- name: data
type: array,object
description: 該行的原始數據源(數組或對象)
- name: dataIndex
type: integer
description: DataTables內部存儲中的行的索引。
- name: cells
type: node[]
description: 列的單元格組成的數組(自1.10.17新增)
drawCallback:
description: 每次DataTables執行繪製時調用的函數
type: function
parameters:
- name: settings
type: DataTables.Settings
description: DataTables設置對象
footerCallback:
description: 頁腳顯示回調函數,與headerCallback相同，但是對於表腳，此函數允許您在每個“繪製”事件上修改表腳.如果表沒有tfoot標籤,則回調不會調用.
type: function
parameters:
- name: tfoot
type: node
description: 表的tfoot標籤
- name: data
type: array
description: 表的完整數據數組。請注意，這是按照數據索引順序進行的。將display參數用於當前的顯示順序
- name: start
type: integer
description: 在顯示的數組的當前顯示起點的索引
- name: end
type: integer
description: 在顯示的數組的當前顯示終點的索引
- name: display
type: array
description: 可視位置的數組
formatNumber:
description: 這個回調用於格式化較大的數字,可以配置language.thousands或columns.render達到效果
type: function
default: 用逗號分隔符顯示成千的數字
parameters:
- name: formatNumber
type: integer
description: 待格式化的數字
headerCallback:
description: 表頭顯示回調,每次重繪都會調用並允許您動態修改表頭行。這可用於計算和顯示有關表的有用信息。
type: function
parameters:
- name: thead
type: node
description: 表頭的thead標籤
- name: data
type: array
description: 表的完整數據數組。請注意，這是按照數據索引順序進行的。將display參數用於當前的顯示順序
- name: start
type: integer
description: 在顯示的數組的當前顯示起點的索引
- name: end
type: integer
description: 在顯示的數組的當前顯示終點的索引
- name: display
type: array
description: 可視位置的數組
infoCallback:
description: 表摘要信息顯示回調.國際化選項language可以處理大多數情況,也可以在此回調中自定義.如果禁用info就無法調用.
type: function
parameters:
- name: settings
type: DataTables.Settings
description: DataTables設置對象
- name: start
type: integer
description: 用於重繪數據的起始位置
- name: end
type: integer
description: 用於重繪數據的終點位置
- name: max
type: integer
description: 表中的總行數(不考慮過濾)
- name: total
type: integer
description: 過濾後數據集中的總行數
- name: pre
type: string
description: DataTables使用其自己的規則格式化的字符串
initComplete:
description: 初始化完成回調,processing的字符串也會顯示加載信息
type: function
parameters:
- name: settings
type: DataTables.Settings
description: DataTables設置對象
- name: json
type: object
description: 如果設置了ajax,則是服務器返回的數據,否則是undefined
preDrawCallback:
description: 繪圖前回調, 可以在每次繪製前執行更新或清除或移除監聽事件,返回false會取消重繪
type: function
parameters:
- name: settings
type: DataTables.Settings
description: DataTables設置對象
rowCallback:
description: 行繪製調用.通過此回調,你可以在爲每個表格繪製生成行之後,但在將其呈現到文檔之前,對每個行進行"後處理".這意味着行尚未在文檔中可能沒有寬度.
type: function
parameters:
- name: row
type: node
description: 正在插入文檔的tr標籤
- name: data
type: array,object
description: 該行的數據源,根據DataTables配置確定該行是數組還是對象,同時假如有隱藏的列,td.eq(4)和data[4]是有區別的.
- name: displayNum
type: integer
description: 當前顯示頁面中的行號
- name: displayIndex
type: integer
description: 當前數據搜索集中的行號(即所有可用頁面上的行數)
- name: dataIndex
type: integer
description: 該行的DataTables內部索引
stateLoadCallback:
description: 定義在何處以及如何加載保存狀態的回調.
type: function
parameters:
- name: settings
type: DataTables.Settings
description: DataTables設置對象
- name: callback
type: function
description: 自1.10.13開始,支持異步獲取數據,調用callback(data)而不需要發起同步請求然後return結果
stateLoadParams:
description: 允許在加載狀態之前修改保存狀態的回調
type: function
parameters:
- name: settings
type: DataTables.Settings
description: DataTables設置對象
- name: data
type: object
description: 要保存的數據.數據來自stateSaveParams
stateLoaded:
description: 狀態加載完畢後的回調,如果你僅需要知道保存狀態的信息,那麼就很有用.
type: function
parameters:
- name: settings
type: DataTables.Settings
description: DataTables設置對象
- name: data
type: object
description: 要保存的數據.數據來自stateSaveParams
stateSaveCallback:
description: 定義表的狀態如何存儲,存儲在哪裏的回調
type: function
parameters:
- name: settings
type: DataTables.Settings
description: DataTables設置對象
- name: data
type: object
description: 要保存的數據.數據來自stateSaveParams
stateSaveParams:
description: 在狀態數據實際被保存之前修改狀態的回調,該回調每當DataTables請求被保存的狀態時執行
type: function
parameters:
- name: settings
type: DataTables.Settings
description: DataTables設置對象
- name: data
type: object
description: 要保存的數據.數據來自stateSaveParams
Options:
deferLoading: # 延遲加載服務器端數據直到第二次繪製,比如初始HTML頁面有一些數據顯示
- type: integer
description: 允許延遲加載,指示DataTables完整數據集中有多少項
default: null
- type: array
description: 允許延遲加載,第一個參數是過濾後的行數,第二個參數是過濾前的行數
destroy: # 銷燬與選擇器匹配的所有現有表,並使用新的初始化參數.如果不需要修改參數可以使用ajax.reload()
type: boolean
default: false
displayStart: # 初始化分頁起始點,默認是0,注意這個0是數據行數不是頁數,如果頁面容量是10則第二頁初始應設置爲10而不是1.(必須啓用分頁paging纔有效)
type: integer
default: 0
dom: # 定義表控件元素以什麼順序出現在頁面上.有其他樣式框架時使用起來有點複雜,未來的1.11版將會改進
type: string
default: lfrtip
options:
- l即lengthChange指控制頁面容量的輸入控件
- f即filter指過濾輸入搜索控件
- t即table指表格主體
- i即infomation summary指表格的狀態提示信息
- p即pagination指分頁控件
- r即processing指processing顯示元素
markup: # 除了上述的options,你還可以指定div對options進行嵌套或設置樣式
- <>是一個div
- <"class">是一個類名叫class的div
- <"#id">是一個ID叫id的div
- <"#id.class">是一個ID叫id類名叫class的div
styling:
Bootstrap3: >
"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"
Bootstrap4: >
"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
pluginOptions: # DataTables的一些插件也支持dom配置
- B指Buttons
- R指ColReorder
- S指Scroller
- P指SearchPanes
lengthMenu: # 配置頁面容量下拉選擇框select的值
- type: 1D
default: [10, 25, 50, 100]
description: 一維數組同時指定select的文本和值,注意數組中的值必須大於0,如果有-1就相當於禁用分頁顯示所有的行
- type: 2D
description: 二維數組指定第一個內部數組作爲select的值,第二個內部數組作爲select的文本顯示
order: # 初始化應用於表格的排序,必須是二維數組,內部數組第一個元素是索引,第二個是方向'asc'或'desc'
type: 2D
default: [[0, 'asc']]
orderCellsTop: # 對於複雜的表頭來說,此選項配置上表頭還是下表頭觸發排序事件監聽
type: boolean
default: false # 默認是下表頭觸發
orderClasses: # 突出顯示錶格正文中正在排序的列
type: boolean
default: true
orderFixed: # 設置一直應用排序的列和order配合使用
- type: array
description: 相當於對象形式的pre前綴排序
- type: object
description: 對象包含pre和post兩個屬性,代表prefix和postfix
orderMulti: # 多列排序能力的控制,按住shift點擊表頭.禁用之後用戶無法進行多列排序(不妨礙代碼控制排序).
type: boolean
default: true
pageLength: # 初始化頁面容量大小
type: integer
default: 10
pagingType: # 分頁插件按鈕的展示選項,要更改在分頁欄上顯示的頁碼數量使用$.fn.dataTable.ext.pager.numbers_length = 9;
type: string
default: simple_numbers
options:
- numbers: 分頁按鈕只有數字
- simple: 分頁按鈕只有上一頁,下一頁
- simple_numbers: 分頁按鈕有上一頁,下一頁和數字
- full: 分頁按鈕有首頁,上一頁,下一頁,尾頁
- full_numbers: 分頁按鈕有首頁,上一頁,下一頁,尾頁和數字
- first_last_numbers: 分頁按鈕有首頁,尾頁和數字
renderer: # 顯示組件渲染器類型,例如指定header和pageButton的屬性爲bootstrap
options:
- header: 表頭單元格渲染器
- pageButton: 分頁插件按鈕
retrieve: # 根據選擇器檢索已存在的DataTables實例
type: boolean
default: false
rowId: # 指定每行元素標籤的id,從數據源中獲取,可以使用(.)對象表示法,默認是DT_RowId
- type: string
default: DT_RowId
- type: function
parameters:
- name: data
type: object
description: 行數據
scrollCollapse: # 在啓用scrollY後,當顯示有限數量的行時，允許表格降低高度
type: boolean
default: false
search: # 在DataTables或過濾選項中設置初始化過濾器
caseInsensitive:
type: boolean
default: true
description: 控制搜索過濾器是否大小寫不敏感,默認是不敏感
regex:
type: boolean
default: false
description: 控制搜索過濾器是否啓用正則表達式匹配,默認不啓用
search:
type: string
description: 在表格中設置初始化過濾條件
smart:
type: boolean
default: true
description: 控制啓用DataTables的智能過濾
searchCols: # 爲單個列定義初始搜索,數組大小與columns數組大小一致,內部元素默認是null,也可以和search選項一樣設置search,regex(default: false),smart(default: true)
type: array
searchDelay: # 設置搜索頻率,只對全局搜索有用,對api方法search()或column().search()無效,如果想限制調用api(),請使用工具方法$.fn.dataTable.util.throttle()
type: integer # 設置的是毫秒數
default: null
stateDuration: # 狀態保存有效期
type: integer
default: 7200 # 該值以秒爲單位,如果指定爲0則使用localStorage狀態永久保存,-1使用sessionStorage
stripeClasses: # 爲表中的行設置斑馬條紋類名稱,如果沒有指定就會從$.fn.dataTable.ext.classes.sStripeOdd,$.fn.dataTable.ext.classes.sStripeEven中獲取
type: array
default: ['odd', 'even']
tabIndex: # 控制表頭的鍵盤導航(Tab選擇表格表頭Enter更改排序) 0代表可以獲取焦點使用Tab導航,-1代表可以獲取焦點禁用Tab導航,正數可以獲取焦點使用Tab導航,並且比0和-1優先級高,但是數字越大順序越靠後
type: integer
default: 0
Columns:
columnDefs: # 參數幾乎與columns類似只不過多了targets,但是此參數允許將特定的選項分配給一個或多個列,並且不是每個列都必須要指定選項(columns需要).
type: array
targets:
- type: integer
description: 0或正整數代表從表左側計數,負整數從表右側計數
- type: string
description: 類名字符串代表將於表的th的類名相匹配的列,_all代表所有列
- type: array
description: 可以使用上面兩種類型組合
conflict: # 因爲columnDefs允許給多個列設置選項參數,不管是不是重複.這會產生衝突
- columns設置的選項優先級比columnDefs優先級高
- columnDefs數組中上面的比下面的優先級高
columns: # 設置列初始化屬性,該屬性是一個數組.數組中的元素可以設置爲null(可能會報錯)或是下面的屬性組成的對象
cellType:
description: 要爲列創建的單元格類型
type: string
default: td
className:
description: 分配給列中每個單元格的類,可以使用空格分開多個class
type: string
contentPadding:
description: 會將contenPadding設置的內容添加到當前列的最長的一行的末尾作爲內容的填充以增加內容寬度,但不會展示
type: string
createdCell:
description: 單元創建的回調以允許DOM操作,作爲render的一個補充
type: function
parameters:
- name: cell
type: node
description: td標籤節點
- name: cellData
type: any
description: 原始的未經修改的數據源數據
- name: rowData
type: any
description: 單元格所在行的數據源數據
- name: rowIndex
type: integer
description: 該行的DataTables內部索引
- name: colIndex
type: integer
description: 該列的DataTables內部索引
data: # 從行數據對象/數組設置列的數據源
- type: integer
default: 自動獲取列的索引值0,1,2...
description: 數據源是數組時,data的值就是列的索引值,DataTables內部每列自動遞增
- type: string
options:
- type: '.'
description: 使用.可以獲取數據源深度嵌套的屬性
- type: '[]'
description: '如果獲取的是數組中的多個元素的某個屬性,可以使用[]之間的字符作爲分隔符,然後用.確定是哪個屬性'
- type: '()'
description: '數據源中返回的是一個函數就要加(),並執行這個函數'
description: 數據源是對象時,在數據源中讀取和寫入對象屬性,讀取方式有如上三種
- type: null
description: 如果data設置爲null,則會根據render來顯示,如果未定義render,則defaultContent被用於顯示,如果都沒有設置就會把行數據顯示[Object object]
- type: object
options:
- type: '_'
description: 這個是必須指定的默認值,如果沒有指定下面的類型時就會使用,所有的值與columns.data的規則一致
- type: 'filter'
description: 用於過濾搜索時使用的屬性
- type: 'display'
description: 用於頁面顯示時的數據
- type: 'type'
description: 用於類型監測時的數據
- type: 'sort'
description: 用於排序時的數據
description: 爲DataTables請求的不同數據類型提供不同的數據,如果啓用服務端模式則不需要這樣設置,所有的操作都可以用數據庫引擎實現,前臺只需要展示
- type: function
description: 每當DataTables請求不同類型(sort, filter, display)的數據時就會調用該方法,僅當從DOM讀取數據或添加新行時纔可以作爲setter方法,而且當type是set時,方法返回值沒有意義,其它類型會取返回值
parameters:
- name: row
type: array,object
description: 該行的數據
- name: type
type: string
description: 單元格請求的數據類型,預定義的類型是filter,display,type,sort
- name: set
type: any
description: 當作爲setter方法調用時,type的參數是set,set參數就是要設置的值,否則就是undefined
- name: meta
type: object
parameters:
row: 該單元格所在的行索引
col: 該單元格的列索引
settings: DataTables設置對象
description: 自1.10.1開始,新增meta參數,包含了這個單元格的額外信息
defaultContent:
type: string
description: 爲該列設置默認靜態內容, 如果該單元格獲取的數據爲null,則默認顯示defaultContent的內容,想要顯示動態內容請用render
name:
type: string
description: 爲該列設置一個描述性名稱,便於使用api確定一列,如table.column('location:name').data()可以獲取一列設置name爲location的數據
orderData: # 將多列順序定義爲列的默認順序, 例如如果一列本身無法進行排序,可以使用其它列的數據作爲排序依據
- type: integer
description: 要使用排序的單列索引
- type: array
description: 定義多列排序的排序索引
orderDataType:
type: string
description: 實時DOM排序類型分配,可以用來自定義數據類型
orderSequence:
type: array
default: ['asc', 'desc']
description: 自定義該列的排序順序,默認先升序後降序
orderable:
type: boolean
default: true
description: 允許或禁用用戶的控制列排序的能力
render:
- type: integer
description: 數據源是數組時默認是數組索引
- type: string
options:
- type: '.'
description: 使用.可以獲取數據源深度嵌套的屬性
- type: '[]'
description: '如果獲取的是數組中的多個元素的某個屬性,可以使用[]之間的字符作爲分隔符,然後用.確定是哪個屬性'
- type: '()'
description: '數據源中返回的是一個函數就要加(),並執行這個函數'
- type: object
options:
- type: '_'
description: 這個是必須指定的默認值,如果沒有指定下面的類型時就會使用,所有的值與columns.data的規則一致
- type: 'filter'
description: 用於過濾搜索時使用的屬性
- type: 'display'
description: 用於頁面顯示時的數據
- type: 'type'
description: 用於類型監測時的數據
- type: 'sort'
description: 用於排序時的數據
description: 爲DataTables請求的不同數據類型提供不同的數據,如果啓用服務端模式則不需要這樣設置,所有的操作都可以用數據庫引擎實現,前臺只需要展示
- type: function
description: 每當DataTables請求不同類型(sort, filter, display)的數據時就會調用該方法,僅當從DOM讀取數據或添加新行時纔可以作爲setter方法,而且當type是set時,方法返回值沒有意義,其它類型會取返回值
parameters:
- name: row
type: array,object
description: 該行的數據
- name: type
type: string
description: 單元格請求的數據類型,預定義的類型是filter,display,type,sort
- name: set
type: any
description: 當作爲setter方法調用時,type的參數是set,set參數就是要設置的值,否則就是undefined
- name: meta
type: object
parameters:
row: 該單元格所在的行索引
col: 該單元格的列索引
settings: DataTables設置對象
description: 自1.10.1開始,新增meta參數,包含了這個單元格的額外信息
searchable:
type: boolean
default: true
description: 控制該列是否允許被搜索
title:
type: string
description: 設置表頭內容
type:
type: string
options:
- type: date
- type: num
- type: num-fmt
- type: html-num
- type: html-num-fmt
- type: html
- type: string
description: 設置列類型-用於過濾和排序字符串處理,必須是客戶端模式.DataTables有一些內置的類型.
visible:
type: boolean
default: true
description: 控制該列是否顯示或隱藏
width:
type: string
default: 自動檢測表格內容,確定寬度
Internationalisation:
language: # 國際化配置
aria:
paginate:
first: '<<'
last: '<'
next: '>'
previous: '>>'
sortAscending: ': activate to sort column ascending' # 當該列是升序時在th中顯示的字段前綴
sortDescending: ': activate to sort column descending' # 當該列是降序時在th中顯示的字段前綴
decimal: '.' # 小數位字符
emptyTable: 'No data available in table' # 表沒有數據時顯示的字符串
info: 'Showing _START_ to _END_ of _TOTAL_ entries' # 表摘要信息顯示字符串._START_:當前頁第一條數據索引;_END_:當前頁最後一條數據索引;_TOTAL_:過濾後數據;_MAX_:過濾前數據;_PAGE_:當前頁數;_PAGES_:總頁數
infoEmpty: 'Showing 0 to 0 of 0 entries' # 表格爲空時info的信息
infoFiltered: '(filtered from _MAX_ total entries)' # 過濾時添加到info的後綴
infoPostFix: '' # info的最後的後綴
lengthMenu: 'Show _MENU_ entries' # 表格容量
loadingRecords: 'Loading...' # ajax請求時顯示的信息
paginate:
first: 'First'
last: 'Last'
next: 'Next'
previous: 'Previous'
processing: 'Processing...' # 排序或搜索時顯示的字符串
search: 'Search:' # 設置搜索字符串,如果沒有_INPUT_就會將搜索框放到字符串之後
searchPlaceholder: '' # 設置搜索輸入框佔位符屬性
thousands: ',' # 千位分隔符
url: '' # 外部URL設置的language參數對象
zeroRecords: 'No matching records found' # 表中爲空時,表格中顯示的字符串
Static:
$.fn.dataTable.ext.errMode: # 設置DataTables將如何報告錯誤,默認是alert可以改成throw控制檯輸出.
AutoFill:
autoFill:
- type: boolean
default: undefined
description: 控制使用autoFill
- type: object
description: 更細節的配置autoFill
options:
alwaysAsk:
type: boolean
default: false
description: 設置爲true則每次執行autoFill時都會進行詢問
columns:
type: column-selector
description: 如果是string類型,可以設置css選擇器,如果是數組可以使用列索引
editor:
type: DataTable.Editor
default: null
description: 附加編輯器實例以進行數據庫更新
enable:
type: boolean
default: true
description: autoFill的初始啓用狀態
focus:
type: string
default: null
options:
- click: 點擊後出現可拖拽事件
- focus: 配合KeyTable實現鍵盤複製粘貼
- hover: 當鼠標在單元格上即可觸發可拖拽事件
- null: 自動識別,如果開啓keyTable則是focus,否則是hover
horizontal:
type: boolean
default: true
description: 控制允許橫向拖拽
update:
type: boolean
default: true
description: 是否允許前臺自動更新數據並重繪,假如是服務端模式可以禁用此選項禁止頁面自動刷新
vertical:
type: boolean
default: true
description: 控制允許縱向拖拽
language:
autoFill:
button:
type: string
default: '>'
description: 多填充選擇器按鈕文本
cancel:
type: string
default: Cancel
description: 多重填充選擇器取消選項文本信息
fill:
type: string
default: Fill all cells with >i<{data}>/i<
description: 完全填充類型的多填充選擇器文本消息
fillHorizontal:
type: string
default: Fill cells horizontally
description: 水平填充類型的多填充選擇器文本消息
fillVertical:
type: string
default: Fill cells vertically
description: 垂直填充填充類型的多填充選擇器文本消息
increment:
type: string
default: "Increment / decrement each cell by: >input type='number' value='1'<"
description: 增量填充類型的多填充選擇器文本消息
info:
type: string
description: 信息消息顯示在填充類型選擇器的頂部
Buttons:
buttons: # 按鈕配置對象
- type: array
description: 是buttons.buttons的簡寫
- type: boolean
description: 如果爲true,根據$.fn.dataTable.Buttons.defaults自動創建
- type: object
description: buttons的詳細配置
options:
buttons: # 這是一個數組用於配置多個按鈕,裏面的每個項可以是string,object,function
- type: string
description: '可以使用內置的buttons類型,等同於對象的{extend: ...}'
- type: object
description: 詳細配置每個button
options:
action: # 觸發時的動作函數
type: function
description: 可以通過鼠標,觸摸(手機),鍵盤,API(button().trigger())觸發
parameters:
- name: e
type: object
description: 觸發的事件對象
- name: dt
type: DataTables.Api
description: api實例
- name: node
type: jQuery
description: 單擊的按鈕節點的jQuery實例
- name: config
type: object
description: 按鈕的配置對象
attr:
type: object
description: 該按鈕設置屬性
available:
type: function
description: 用於確保按鈕所需依賴都準備就緒,返回true顯示,否則按鈕不會顯示
parameters:
- name: dt
type: DataTables.Api
description: api實例
- name: config
type: object
description: 按鈕的配置對象
className:
type: string
default: undefined
description: 給該按鈕添加類名,可以用空格分隔添加多個類名
destroy:
type: function
description: 在button被銷燬後調用的函數,一般用於取消在init中設置的事件監聽,避免內存泄漏(需要搭配namespace避免誤刪事件監聽).
parameters:
- name: dt
type: DataTables.Api
description: api實例
- name: node
type: jQuery
description: 被銷燬的按鈕的jQuery對象
- name: config
type: object
description: 按鈕的配置對象
enabled:
type: boolean
default: true
description: 設置按鈕的初始狀態,true爲啓用false爲禁用
extend:
type: string
description: 定義基於哪個按鈕類型,可以是內置的或自定義的按鈕類型,可以進行代碼複用修改部分選項而保留未修改的功能
init:
type: function
description: 給按鈕設置初始化函數用於添加特定於該按鈕的事件
parameters:
- name: dt
type: DataTables.Api
description: api實例
- name: node
type: jQuery
description: 被銷燬的按鈕的jQuery對象
- name: config
type: object
description: 按鈕的配置對象
key:
- type: string
description: 監聽的鍵盤字符,必須是單個字符,不區分大小寫
- type: object
options:
key: 用於監聽的單個字符
shiftKey: 設置true就必須按住shift+key纔會觸發
altKey: 設置true就必須按住alt+key纔會觸發
ctrlKey: 設置true就必須按住ctrl+key纔會觸發
metaKey: 設置true就必須按住window(or cmd)+key纔會觸發
name:
type: string
description: 給單個按鈕設置name後,可以使用buttons()和button()找到該按鈕,例如button('location:name')會找到name設置location的按鈕
namespace:
type: string
description: 給每個按鈕設置唯一的命名空間,但是不建議自定義配置,因爲buttons會自動添加命名空間
tag:
type: string
description: 設置包裹按鈕的標籤,默認使用全局的buttons.dom.button,此選項是專爲單個按鈕配置的
text:
- type: string
description: 按鈕文本,可以是HTML字符串
- type: function
description: 可以使用i18n()配置國際化選項,如dt.i18n('buttons.print', 'Print')
parameters:
- name: dt
type: DataTables.Api
description: api實例
- name: node
type: jQuery
description: 被銷燬的按鈕的jQuery對象
- name: config
type: object
description: 按鈕的配置對象
titleAttr:
- type: string
description: 給按鈕添加title屬性
- type: function
description: 可以使用i18n()配置國際化選項,如dt.i18n('buttons.print', 'Print')
parameters:
- name: dt
type: DataTables.Api
description: api實例
- name: node
type: jQuery
description: 被銷燬的按鈕的jQuery對象
- name: config
type: object
description: 按鈕的配置對象
dom: # 用於控制dom構建button的選項的對象
button:
type: object
description: 單個按鈕的DOM配置,默認是<a class="dt-button">...</a>
options:
- tag: 元素標籤例如span,div,a等,不要出現其他字符
- className: 標籤類名,可以設置多個類名,用空格分隔
- disabled: 當標籤處於禁用狀態時添加的類名
- active: 當標籤處於激活狀態時添加的類名
buttonContainer:
type: object
description: 對button設置的標籤元素的包裹,默認是null
options:
- tag: 元素標籤例如span,div,a等,不要出現其他字符
- className: 標籤類名,可以設置多個類名,用空格分隔
buttonLiner:
type: object
description: 按鈕內部元素的DOM配置,默認是<span>...</span>,也可以直接設置buttonLiner爲null
options:
- tag: 元素標籤例如span,a等,不要出現其他字符
- className: 標籤類名,可以設置多個類名,用空格分隔
collection:
type: object
description: 按鈕集合的DOM配置,默認是<div class="dt-button-collection">...</div>
options:
- tag: 元素標籤例如div,aside等,不要出現其他字符
- className: 標籤類名,可以設置多個類名,用空格分隔
container:
type: object
description: Buttons容器元素的DOM配置,默認是<div class="dt-buttons">...</div>
options:
- tag: 元素標籤例如div,aside等,不要出現其他字符
- className: 標籤類名,可以設置多個類名,用空格分隔
name:
type: string
description: 爲組選擇器設置name,可以通過buttons().container('primary:name')找到設置按鈕組name設置爲primary的jQuery對象
ColReorder:
colReorder: # 爲數據表啓用和配置ColReorder擴展,允許拖動列修改列的排列順序,$.fn.dataTable.ColReorder.defaults包含默認配置項
- type: boolean
description: 設置true或false配置ColReorder擴展,是{enable:...}的縮寫
- type: object
description: 設置colReorder詳細配置
options:
enable:
type: boolean
default: true
description: 設置是否允許啓用ColReorder,可以使用api控制colReorder().enable(),colReorder().disable()
fixedColumnsLeft:
type: integer
default: 0
description: 禁止列參與重新排序,從左側開始計數
fixedColumnsRight:
type: integer
default: 0
description: 禁止列參與重新排序,從右側開始計數
order:
type: array
default: 使用表的默認列排序
description: 設置表的列排列順序,必須包含所有列的索引,且不能重複
realtime:
type: boolean
default: true
description: 設置列排序是否實時更新,如果設置爲true則實時更新排序,設置爲false則只有拖拽行爲停止纔會進行重新排序
FixedColumns:
fixedColumns: # 啓用和配置fixedColumns的擴展
- type: boolean
description: 設置成true啓用在$.fn.dataTable.FixedColumns.defaults裏的默認配置
- type: object
description: fixedColumns的詳細配置
options:
heightMatch:
type: string
description: 將使用的行高匹配算法
options:
- none: 將導致FixedColumns無法應用高度匹配(在這種情況下,CSS可能會強制進行高度匹配)
- semiauto: 高度計算將執行一次，結果將被緩存以再次使用,這是行高匹配算法的默認值
- auto: 每次繪製都進行高度匹配(最慢但必須準確)
leftColumns:
type: integer
default: 1
description: 設置左側固定列從0開始
rightColumns:
type: integer
default: 0
description: 設置右側固定列從0開始
FixedHeader:
fixedHeader: # 固定表頭,當表頭滾動到表內容部分時,表頭就會固定在頂部
- type: boolean
description: 設置成true啓用在$.fn.dataTable.FixedHeader.defaults裏的默認配置
- type: object
description: 設置fixedHeader詳細配置
options:
footer:
type: boolean
default: false
description: 是否啓用footer的固定
footerOffset:
type: integer
default: 0
description: 設置距離底部的偏移值
header:
type: boolean
default: true
description: 是否啓用header的固定
headerOffset:
type: integer
default: 0
description: 設置距離頂部的偏移值
KeyTable:
keys: # 給table添加鍵盤操作
- type: boolean
description: 設置成true啓用在$.fn.dataTable.KeyTable.defaults裏的默認配置
- type: object
description: 設置keyTable詳細配置
options:
blurable:
type: boolean
default: true
description: 設置成false後,一旦表格獲取焦點後就無法失去焦點
className:
type: string
default: focus
description: 設置焦點的類名,當獲取焦點時給單元格添加該類名
clipboard:
type: boolean
default: true
description: 啓用剪切板交互功能
clipboardOrthogonal:
type: string
default: display
description: 設置正交數據以複製到剪貼板,也就是說這裏是一個類型影響複製的類型所指向的字符串,但是粘貼不受影響
columns:
type: column-selector # 可以是類名,僞類或列索引組成的數組
description: 設置可以獲取焦點的列
editOnFocus:
type: boolean
default: false
description: 如果有Editor插件,並且設置爲true,則可以在獲取焦點的同時設置單元格可編輯
editor:
type: DataTables.Editor
description: editor實例
focus:
type: cell-selector # 可以是類名,僞類或列索引組成的數組
description: 設置初始化獲取焦點的單元格
keys:
type: array\null
description: 給keyTable添加鍵盤可監聽的按鍵,如果是null則監聽任意鍵盤
tabIndex:
description: 設置表的tabIndex以獲取何時焦點
Responsive:
columns:
responsivePriority:
type: integer
description: 設置列顯示的優先級.當使用responsive插件時,每列可以添加該配置,數字越低優先級越高,隱藏的時間越靠後.也可以通過給th添加data-priority屬性達到同樣的效果.
responsive: # 啓用/禁用responsive
- type: boolean
description: 設置成true啓用在$.fn.dataTable.Responsive.defaults裏的默認配置
- type: object
description: 設置responsive更詳細的配置
options:
breakpoints: # 功能與responsivePriority類似,只不過是通過class的方式
description: 設置響應實例的斷點.默認值$.fn.dataTable.Responsive.breakpoints,這些斷點class都可以添加min-,max-,not-前綴.除此之外有三個特殊的類名all(永遠顯示),none(當前不顯示),never(永遠不顯示).control也是特殊的類,添加那個加號
details: # 設置如何顯示被responsive隱藏的列
- type: boolean
default: true
description: 設置成true啓用在$.fn.dataTables.Responsive.defaults.details裏的默認配置
- type: object
description: 設置顯示隱藏列的具體顯示配置,覆蓋$.fn.dataTables.Responsive.defaults.details
options:
display:
type: function
default: $.fn.dataTable.Responsive.display.childRow
description: 定義隱藏信息應如何顯示給用戶,childRow可以讓用戶點擊控制信息顯隱,childRowImmediate會立即顯示所有隱藏的信息,modal()會在彈出框中顯示信息,裏面包含header參數(該參數賦予一個row實例作爲參數的匿名函數)
parameters: # 自定義這個方法,返回true或false觸發隱藏信息是否被顯示或隱藏的事件,返回undefined不會觸發事件
- name: row
type: DataTables.Api
description: row()返回的api實例
- name: update
type: boolean
description: true說明是自動觸發的,false是用戶手動觸發的
- name: render
type: function
description: 要顯示的數據信息,與renderer函數返回的字符串一樣
renderer:
type: function
default: $.fn.dataTable.Responsive.renderer.listHidden()
description: 定義用於顯示子行的渲染器,內置渲染器在$.fn.dataTable.Responsive.renderer中,默認使用listHidden(),還有tableAll()用於顯示所有列(可以配置tableClass)
parameters: # 該函數返回主要是boolean或string.返回false則不顯示子行,返回的HTML字符串就是要顯示的信息
- name: api
type: DataTables.Api
description: DataTables api實例
- name: rowIdx
type: integer
description: 行索引
- name: columns
type: array
description: 每個列的信息組成的數組,每個列的對象包含title,data,hidden,columnIndex,rowIndex
target:
- type: integer
default: 0
description: 如果type設置爲column,則target就是一個列索引(支持負數),該列必須有control類名用於顯示控制顯隱的按鈕.如果type設置爲inline,則target無效
- type: string
description: jQuery選擇器選中的元素,可以是整行或整行中的某些列
type:
type: string
default: inline
description: 設置子行顯示控件類型,inline將第一列作爲觸發條件,column將整行作爲觸發條件,none不會顯示控件
orthogonal:
type: string
default: display
description: 設置隱藏信息顯示的正交數據請求類型,假如使用columns.render(),其中會根據不同的請求類型,返回不同的結果,默認返回display類型的數據
RowGroup:
rowGroup: # 啓用rowGroup插件的配置
- type: boolean
description: 設置成true啓用在$.fn.dataTable.RowGroup.defaults裏的默認配置,相當於以第一列的數據作爲分組依據
- type: object
description: 設置rowGroup更詳細的配置
options:
className:
type: string
default: group
description: 給分組行添加類名,讓它與普通行樣式不同
dataSrc:
- type: integer/string
default: 0
description: 假如數據源是數組則使用數組索引決定以哪一列作爲分組依據,假如數據源是對象則使用columns.data作爲分組依據
- type: array
description: 是上面的數據組成的數組,可以形成多級分組行
emptyDataGroup:
type: string/null
default: No group
description: 如果dataSrc指向的數據源數據是null,undefined或空字符串
enable:
type: boolean
default: true
description: 是否啓用rowGroup
endClassName:
type: string
default: group-end
description: 給分組末尾的行添加自定義樣式
endRender:
- type: null
default: null
description: 不顯示分組末尾的行
- type: function
description: 函數返回值有string,node,jQuery.返回string會創建tr,td和colspan屬性;返回一個tr節點裏面有多個td;返回一個tr的jQuery對象,這個和節點一樣
parameters:
- name: rows
type: DataTables.Api
description: rows()返回的api實例
- name: group
type: string
description: rowGroup.dataSrc指向的數據
- name: level
type: integer
description: 嵌套級別。最高層是索引0
startClassName:
type: string
default: group-start
description: 給分組開頭的行添加自定義樣式
startRender:
- type: null
description: 不顯示分組開頭的行
- type: function
default: function(rows,data){return data;}
description: 函數返回值有string,node,jQuery.返回string會創建tr,td和colspan屬性;返回一個tr節點裏面有多個td;返回一個tr的jQuery對象,這個和節點一樣
parameters:
- name: rows
type: DataTables.Api
description: rows()返回的api實例
- name: group
type: string
description: rowGroup.dataSrc指向的數據
- name: level
type: integer
description: 嵌套級別。最高層是索引0
RowReorder:
rowReorder: # 啓用rowReorder插件的配置
- type: boolean
description: 設置成true啓用在$.fn.dataTable.RowReorder.defaults裏的默認配置,是rowReorder.enable的縮寫
- type: object
description: 設置rowReorder更詳細的配置
options:
dataSrc: # 配置將用於重新排序數據的數據點
- type: integer
default: 0
description: 數組索引
- type: object
description: 和columns.data的設置基本相同
editor:
type: DataTable.Editor
description: 添加Editor實例
enable:
type: boolean
default: true
description: 設置rowReorder插件是否使用,rowReorder.enable()或rowReorder.disable()
formOptions:
type: object
description: 提交數據時,設置"編輯器"表單的選項,該對象可能包含submit屬性.
selector:
type: string
default: td:first-child
description: 定義用於選擇將開始拖動的元素的選擇器
snapx: # 拖動行的水平位置控制
- type: boolean
default: false
description: 設置成true拖動的行會垂直跟隨鼠標,水平鎖定表格左側.設置成false不受任何限制
- type: integer
description: 垂直跟隨鼠標水平,鎖定表格左側的偏移量(支持正負值)
update:
type: boolean
default: true
description: 控制行被放下時是否執行自動更新
Scroller:
scroller: # 啓用scroller插件的配置,
boundaryScale:
type: number
default: 0.5
description: 邊界比例,默認滾動到當前顯示的一半會加載新的數據,讓頁面數據看起來是連續的.0會每次滾動的時候都更新,1會滾動到底部纔會更新
displayBuffer:
type: integer
default: 9
description: Scroller應該預先緩衝以確保平滑滾動的數據量.這是一個乘法,假如表的可視窗口有400px,每行高20px,則加載緩存的行是180行
loadingIndicator:
type: boolean
default: false
description: 是否顯示加載額外數據時的加載提示.如果設置成true會在加載額外數據時,顯示language.loadingRecords的提示信息
rowHeight: # 設置行高,每個行的高度要一致,這樣才能計算總高度,但是不建議使用,使用默認的auto
- type: integer
description: 設置行高,這個是像素值
- type: string
default: auto
description: auto是唯一的值,這樣會自動判斷行高
serverWait:
type: integer
default: 200
description: 當啓用服務端模式時,這個配置會設置延遲(單位毫秒),在用戶頻繁滾動時減少ajax請求的頻率
SearchPanes: 這個沒看,感覺我用不到
Select:
language:
select:
cells: # 配置選擇單元格時info應顯示的信息
- type: string
description: 應該包含%d,用於代表選中的多少個單元格
- type: object
description: 對象形式的cells規則與string一致,可以包含%d,對象的鍵可以是_,0,1,2...;其中_是必須的用於默認值設置,如果選中0,1,2個單元格就會顯示0,1,2對應的值作爲提示信息
columns: # 配置選擇列時info應顯示的信息,該規則與cells規則一致
- type: string
description: 應該包含%d,用於代表選中的多少個列
- type: object
description: 對象形式的columns規則與string一致,可以包含%d,對象的鍵可以是_,0,1,2...;其中_是必須的用於默認值設置,如果選中0,1,2個列就會顯示0,1,2對應的值作爲提示信息
rows:
- type: string
description: 應該包含%d,用於代表選中的多少個行
- type: object
description: 對象形式的rows規則與string一致,可以包含%d,對象的鍵可以是_,0,1,2...;其中_是必須的用於默認值設置,如果選中0,1,2個行就會顯示0,1,2對應的值作爲提示信息
select:
- type: boolean
description: 用於設置是否使用select插件,默認是false,可以通過初始化或select.style()來開啓select插件
- type: string
description: 這個是select.style的簡寫,設置選中行時添加的class
- type: object
description: select詳細配置
options:
blurable:
type: boolean
default: false
description: 當用戶點擊表外時,是否允許表取消已選中的行
className:
type: string
default: selected
description: 給選中的單位添加class,可以是cell,column,row.
info:
type: boolean
default: true
description: 是否在info中顯示select的提示信息
items:
type: string
default: row
description: 設置要選擇的表項(行,列或單元格).也可以使用api select.items()設置表項
options:
- row: 選擇行
- column: 選擇列
- cell: 選擇單元格
selector:
type: string
default: td,th
description: 當選擇了select.items後,還可以設置select.selector,這是一個jQuery對象,會在該對象上添加select的選擇事件,也可以通過select.selector()設置
style:
type: string
default: os
description: 配置用戶使用select時與表的交互模式.如果設置爲api,用戶將無法操作select.只能通過api select.style()操作.
options:
- api: 選擇僅可以使用api選中
- single: 同時只能選中一項,無法多選
- multi: 可以選擇多項
- os: 類似文件的選擇模式,可以使用Ctrl+鼠標左鍵執行一個一個的多選,也可以使用shift+鼠標左鍵執行一次多選
- multi+shift: 單擊行時,可以輕鬆進行多行選擇而無需立即取消選擇
toggleable:
type: boolean
default: false
description: 當點擊一個選中的項時,是否允許取消選中.默認不允許取消選中
...