这个是我在学习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: 当点击一个选中的项时,是否允许取消选中.默认不允许取消选中
...