DataTables初始化配置选项学习

这个是我在学习DataTables时参考官方1.10.20的文档写的一些理解,在这里分享给大家,如果理解有误,欢迎大家在评论区留言.
该文档是用yaml文件,所以大家可以用其它支持yaml的编辑器打开查看或者转成json格式,但是注意json格式不支持注释,所以不建议.
如果只需要DataTables核心功能,只要看前600行就好,如果需要官方扩展的可以参考后600行的部分内容.当然有些部分可能是历史版本的参数,这里并没有记录
%YAML 1.2 # v1.10.20
---
Features:autoWidth: # 允许或禁用自动列宽计算.default: truetype: booleandeferRender: # 功能控制延迟渲染以提高初始化速度.default: falsetype: booleaninfo: # 功能控制表信息显示字段,一般位于左下角.default: truetype: booleanlengthChange: # 功能控制最终用户更改表的分页显示长度的能力.若禁用分页功能,则此功能设置无效default:  truetype: booleanordering: # 功能控制DataTables的排序功能default: truetype: booleanpaging: # 允许或禁用表格分页功能default: truetype: booleanprocessing: # 允许或禁用处理状态(例如大量数据的排序)的显示(language.processing)default: falsetype: booleanscroolX: # 设置横向滚动,允许设置布尔值,任意css单位或数字(当做像素)default: falsetype: booleanscroolY: # 设置纵向滚动,允许设置任意css单位或数字(当做像素),此高度是table的body的高度,不包含表头和表尾.default: ''type: stringsearching: # 允许或禁用DataTables的搜索能力default: truetype: booleanserverSide: # 启用DataTables服务端模式,默认是客户端模式,搜索(过滤),分页,排序在浏览器中完成default: falsetype: booleanstateSave: # 状态保存,在表重新加载时恢复表的状态default: falsetype: boolean
Data:ajax: # 从Ajax源加载表内容的数据- type: stringdescription: 设置加载数据的URL- type: objectdescription: 将参数传递给JQuery.ajax,不过有些参数和ajax不一样data: # 根据Ajax请求添加或修改提交给服务器的数据- type: objectdescription: 作为对象使用时可以传递一些静态参数的值,如果传递的参数是动态的,请使用下面的函数形式.- type: functionparameters:- name: datatype: objectdescription: 传递给服务端的原始参数- name: settingstype: objectdescription: 从1.10.6开始有了DataTables settings作为参数dataSrc: # 读取从服务器返回的数据,选择表格的数据源,默认值是字符串data- type: stringdefault: 'data'description: 定义要读取的对象的属性,默认值是data,如果返回的是数组则是空字符串,如果返回的层级较多可以使用(.)调用- type: functiondescription: 作为函数只有一个参数,就是服务器返回的json数据,函数返回的值就是数据源,数据源必须是数组类型的parameters:- name: datatype: objectdescription: ajax请求后从服务端返回的数据Notes: # 此选项说明一些与jQuery.ajax不一样的需要注意的地方- data: ajax.data. 与jQuery.ajax一样可以作为对象传递数据,DataTables将它拓展可为函数- dataSrc: ajax.dataSrc. 用来指定返回的数据集- success: 不要使用success,因为它在DataTables内部使用,如果想操作或修改服务端返回的数据,请使用ajax.dataSrc或ajax的函数形式,但是其它的回调监听函数可以继续使用- type: functionparameters:- name: datatype: objectdescription: 发送给服务器的数据- name: callbacktype: functiondescription: 获取所需数据后必须执行的回调函数。该数据应作为唯一参数传递到回调中- name: settingstype: DataTables.Settingsdescription: DataTables设置对象data:type: arraydescription: 用作表初始化的数据,会覆盖table中的DOM数据。data数组中的可以是数组或对象(如果指定了columns.data)
Callbacks:createdRow:description: 当table的body中插入tr时执行的回调,当使用deferRender或serverSide时非常有用,你可以添加事件,类名信息或在创建行时对其进行初始化type: functionparameters:- name: rowtype: nodedescription: tr标签,刚创建的行元素- name: datatype: array,objectdescription: 该行的原始数据源(数组或对象)- name: dataIndextype: integerdescription: DataTables内部存储中的行的索引。- name: cellstype: node[]description: 列的单元格组成的数组(自1.10.17新增)drawCallback:description: 每次DataTables执行绘制时调用的函数type: functionparameters:- name: settingstype: DataTables.Settingsdescription: DataTables设置对象footerCallback:description: 页脚显示回调函数,与headerCallback相同，但是对于表脚，此函数允许您在每个“绘制”事件上修改表脚.如果表没有tfoot标签,则回调不会调用.type: functionparameters:- name: tfoottype: nodedescription: 表的tfoot标签- name: datatype: arraydescription: 表的完整数据数组。请注意，这是按照数据索引顺序进行的。将display参数用于当前的显示顺序- name: starttype: integerdescription: 在显示的数组的当前显示起点的索引- name: endtype: integerdescription: 在显示的数组的当前显示终点的索引- name: displaytype: arraydescription: 可视位置的数组formatNumber:description: 这个回调用于格式化较大的数字,可以配置language.thousands或columns.render达到效果type: functiondefault: 用逗号分隔符显示成千的数字parameters:- name: formatNumbertype: integerdescription: 待格式化的数字headerCallback:description: 表头显示回调,每次重绘都会调用并允许您动态修改表头行。这可用于计算和显示有关表的有用信息。type: functionparameters:- name: theadtype: nodedescription: 表头的thead标签- name: datatype: arraydescription: 表的完整数据数组。请注意，这是按照数据索引顺序进行的。将display参数用于当前的显示顺序- name: starttype: integerdescription: 在显示的数组的当前显示起点的索引- name: endtype: integerdescription: 在显示的数组的当前显示终点的索引- name: displaytype: arraydescription: 可视位置的数组 infoCallback:description: 表摘要信息显示回调.国际化选项language可以处理大多数情况,也可以在此回调中自定义.如果禁用info就无法调用.type: functionparameters:- name: settingstype: DataTables.Settingsdescription: DataTables设置对象- name: starttype: integerdescription: 用于重绘数据的起始位置- name: endtype: integerdescription: 用于重绘数据的终点位置- name: maxtype: integerdescription: 表中的总行数(不考虑过滤)- name: totaltype: integerdescription: 过滤后数据集中的总行数- name: pretype: stringdescription: DataTables使用其自己的规则格式化的字符串initComplete:description: 初始化完成回调,processing的字符串也会显示加载信息type: functionparameters:- name: settingstype: DataTables.Settingsdescription: DataTables设置对象- name: jsontype: objectdescription: 如果设置了ajax,则是服务器返回的数据,否则是undefinedpreDrawCallback:description: 绘图前回调, 可以在每次绘制前执行更新或清除或移除监听事件,返回false会取消重绘type: functionparameters:- name: settingstype: DataTables.Settingsdescription: DataTables设置对象rowCallback:description: 行绘制调用.通过此回调,你可以在为每个表格绘制生成行之后,但在将其呈现到文档之前,对每个行进行"后处理".这意味着行尚未在文档中可能没有宽度.type: functionparameters:- name: rowtype: nodedescription: 正在插入文档的tr标签- name: datatype: array,objectdescription: 该行的数据源,根据DataTables配置确定该行是数组还是对象,同时假如有隐藏的列,td.eq(4)和data[4]是有区别的.- name: displayNumtype: integerdescription: 当前显示页面中的行号- name: displayIndextype: integerdescription: 当前数据搜索集中的行号(即所有可用页面上的行数)- name: dataIndextype: integerdescription: 该行的DataTables内部索引stateLoadCallback:description: 定义在何处以及如何加载保存状态的回调.type: functionparameters: - name: settingstype: DataTables.Settingsdescription: DataTables设置对象- name: callbacktype: functiondescription: 自1.10.13开始,支持异步获取数据,调用callback(data)而不需要发起同步请求然后return结果stateLoadParams:description: 允许在加载状态之前修改保存状态的回调type: functionparameters:- name: settingstype: DataTables.Settingsdescription: DataTables设置对象- name: datatype: objectdescription: 要保存的数据.数据来自stateSaveParamsstateLoaded:description: 状态加载完毕后的回调,如果你仅需要知道保存状态的信息,那么就很有用.type: functionparameters:- name: settingstype: DataTables.Settingsdescription: DataTables设置对象- name: datatype: objectdescription: 要保存的数据.数据来自stateSaveParamsstateSaveCallback:description: 定义表的状态如何存储,存储在哪里的回调type: functionparameters:- name: settingstype: DataTables.Settingsdescription: DataTables设置对象- name: datatype: objectdescription: 要保存的数据.数据来自stateSaveParamsstateSaveParams:description: 在状态数据实际被保存之前修改状态的回调,该回调每当DataTables请求被保存的状态时执行type: functionparameters:- name: settingstype: DataTables.Settingsdescription: DataTables设置对象- name: datatype: objectdescription: 要保存的数据.数据来自stateSaveParams
Options:deferLoading: # 延迟加载服务器端数据直到第二次绘制,比如初始HTML页面有一些数据显示- type: integerdescription: 允许延迟加载,指示DataTables完整数据集中有多少项default: null- type: arraydescription: 允许延迟加载,第一个参数是过滤后的行数,第二个参数是过滤前的行数destroy: # 销毁与选择器匹配的所有现有表,并使用新的初始化参数.如果不需要修改参数可以使用ajax.reload()type: booleandefault: falsedisplayStart: # 初始化分页起始点,默认是0,注意这个0是数据行数不是页数,如果页面容量是10则第二页初始应设置为10而不是1.(必须启用分页paging才有效)type: integerdefault: 0dom: # 定义表控件元素以什么顺序出现在页面上.有其他样式框架时使用起来有点复杂,未来的1.11版将会改进type: stringdefault: lfrtipoptions:- 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的divstyling: 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指SearchPaneslengthMenu: # 配置页面容量下拉选择框select的值- type: 1Ddefault: [10, 25, 50, 100]description: 一维数组同时指定select的文本和值,注意数组中的值必须大于0,如果有-1就相当于禁用分页显示所有的行- type: 2Ddescription: 二维数组指定第一个内部数组作为select的值,第二个内部数组作为select的文本显示order: # 初始化应用于表格的排序,必须是二维数组,内部数组第一个元素是索引,第二个是方向'asc'或'desc'type: 2Ddefault: [[0, 'asc']]orderCellsTop: # 对于复杂的表头来说,此选项配置上表头还是下表头触发排序事件监听type: booleandefault: false # 默认是下表头触发orderClasses: # 突出显示表格正文中正在排序的列type: booleandefault: trueorderFixed: # 设置一直应用排序的列和order配合使用- type: arraydescription: 相当于对象形式的pre前缀排序- type: objectdescription: 对象包含pre和post两个属性,代表prefix和postfixorderMulti: # 多列排序能力的控制,按住shift点击表头.禁用之后用户无法进行多列排序(不妨碍代码控制排序).type: booleandefault: truepageLength: # 初始化页面容量大小type: integerdefault: 10pagingType: # 分页插件按钮的展示选项,要更改在分页栏上显示的页码数量使用$.fn.dataTable.ext.pager.numbers_length = 9;type: stringdefault: simple_numbersoptions:- numbers: 分页按钮只有数字- simple: 分页按钮只有上一页,下一页- simple_numbers: 分页按钮有上一页,下一页和数字- full: 分页按钮有首页,上一页,下一页,尾页- full_numbers: 分页按钮有首页,上一页,下一页,尾页和数字- first_last_numbers: 分页按钮有首页,尾页和数字renderer: # 显示组件渲染器类型,例如指定header和pageButton的属性为bootstrapoptions:- header: 表头单元格渲染器- pageButton: 分页插件按钮retrieve: # 根据选择器检索已存在的DataTables实例type: booleandefault: falserowId: # 指定每行元素标签的id,从数据源中获取,可以使用(.)对象表示法,默认是DT_RowId- type: stringdefault: DT_RowId- type: functionparameters:- name: datatype: objectdescription: 行数据scrollCollapse: # 在启用scrollY后,当显示有限数量的行时，允许表格降低高度type: booleandefault: falsesearch: # 在DataTables或过滤选项中设置初始化过滤器caseInsensitive:type: booleandefault: truedescription: 控制搜索过滤器是否大小写不敏感,默认是不敏感regex:type: booleandefault: falsedescription: 控制搜索过滤器是否启用正则表达式匹配,默认不启用search:type: stringdescription: 在表格中设置初始化过滤条件smart:type: booleandefault: truedescription: 控制启用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: nullstateDuration: # 状态保存有效期type: integerdefault: 7200 # 该值以秒为单位,如果指定为0则使用localStorage状态永久保存,-1使用sessionStoragestripeClasses: # 为表中的行设置斑马条纹类名称,如果没有指定就会从$.fn.dataTable.ext.classes.sStripeOdd,$.fn.dataTable.ext.classes.sStripeEven中获取type: arraydefault: ['odd', 'even']tabIndex: # 控制表头的键盘导航(Tab选择表格表头Enter更改排序) 0代表可以获取焦点使用Tab导航,-1代表可以获取焦点禁用Tab导航,正数可以获取焦点使用Tab导航,并且比0和-1优先级高,但是数字越大顺序越靠后type: integerdefault: 0
Columns:columnDefs: # 参数几乎与columns类似只不过多了targets,但是此参数允许将特定的选项分配给一个或多个列,并且不是每个列都必须要指定选项(columns需要).type: arraytargets:- type: integerdescription: 0或正整数代表从表左侧计数,负整数从表右侧计数- type: stringdescription: 类名字符串代表将于表的th的类名相匹配的列,_all代表所有列- type: arraydescription: 可以使用上面两种类型组合conflict: # 因为columnDefs允许给多个列设置选项参数,不管是不是重复.这会产生冲突- columns设置的选项优先级比columnDefs优先级高- columnDefs数组中上面的比下面的优先级高columns: # 设置列初始化属性,该属性是一个数组.数组中的元素可以设置为null(可能会报错)或是下面的属性组成的对象cellType:description: 要为列创建的单元格类型type: stringdefault: tdclassName:description: 分配给列中每个单元格的类,可以使用空格分开多个classtype: stringcontentPadding: description: 会将contenPadding设置的内容添加到当前列的最长的一行的末尾作为内容的填充以增加内容宽度,但不会展示type: stringcreatedCell:description: 单元创建的回调以允许DOM操作,作为render的一个补充type: functionparameters:- name: celltype: nodedescription: td标签节点- name: cellDatatype: anydescription: 原始的未经修改的数据源数据- name: rowDatatype: anydescription: 单元格所在行的数据源数据- name: rowIndextype: integerdescription: 该行的DataTables内部索引- name: colIndextype: integerdescription: 该列的DataTables内部索引data: # 从行数据对象/数组设置列的数据源- type: integerdefault: 自动获取列的索引值0,1,2...description: 数据源是数组时,data的值就是列的索引值,DataTables内部每列自动递增- type: stringoptions:- type: '.'description: 使用.可以获取数据源深度嵌套的属性- type: '[]'description: '如果获取的是数组中的多个元素的某个属性,可以使用[]之间的字符作为分隔符,然后用.确定是哪个属性'- type: '()'description: '数据源中返回的是一个函数就要加(),并执行这个函数' description: 数据源是对象时,在数据源中读取和写入对象属性,读取方式有如上三种- type: nulldescription: 如果data设置为null,则会根据render来显示,如果未定义render,则defaultContent被用于显示,如果都没有设置就会把行数据显示[Object object]- type: objectoptions:- type: '_'description: 这个是必须指定的默认值,如果没有指定下面的类型时就会使用,所有的值与columns.data的规则一致- type: 'filter'description: 用于过滤搜索时使用的属性- type: 'display'description: 用于页面显示时的数据- type: 'type'description: 用于类型监测时的数据- type: 'sort'description: 用于排序时的数据description: 为DataTables请求的不同数据类型提供不同的数据,如果启用服务端模式则不需要这样设置,所有的操作都可以用数据库引擎实现,前台只需要展示- type: functiondescription: 每当DataTables请求不同类型(sort, filter, display)的数据时就会调用该方法,仅当从DOM读取数据或添加新行时才可以作为setter方法,而且当type是set时,方法返回值没有意义,其它类型会取返回值parameters:- name: rowtype: array,objectdescription: 该行的数据- name: typetype: stringdescription: 单元格请求的数据类型,预定义的类型是filter,display,type,sort- name: settype: anydescription: 当作为setter方法调用时,type的参数是set,set参数就是要设置的值,否则就是undefined- name: metatype: objectparameters:row: 该单元格所在的行索引col: 该单元格的列索引settings: DataTables设置对象description: 自1.10.1开始,新增meta参数,包含了这个单元格的额外信息defaultContent: type: stringdescription: 为该列设置默认静态内容, 如果该单元格获取的数据为null,则默认显示defaultContent的内容,想要显示动态内容请用rendername:type: stringdescription: 为该列设置一个描述性名称,便于使用api确定一列,如table.column('location:name').data()可以获取一列设置name为location的数据orderData: # 将多列顺序定义为列的默认顺序, 例如如果一列本身无法进行排序,可以使用其它列的数据作为排序依据- type: integerdescription: 要使用排序的单列索引- type: arraydescription: 定义多列排序的排序索引orderDataType:type: stringdescription: 实时DOM排序类型分配,可以用来自定义数据类型orderSequence:type: arraydefault: ['asc', 'desc']description: 自定义该列的排序顺序,默认先升序后降序orderable:type: booleandefault: truedescription: 允许或禁用用户的控制列排序的能力render:- type: integerdescription: 数据源是数组时默认是数组索引- type: stringoptions:- type: '.'description: 使用.可以获取数据源深度嵌套的属性- type: '[]'description: '如果获取的是数组中的多个元素的某个属性,可以使用[]之间的字符作为分隔符,然后用.确定是哪个属性'- type: '()'description: '数据源中返回的是一个函数就要加(),并执行这个函数' - type: objectoptions:- type: '_'description: 这个是必须指定的默认值,如果没有指定下面的类型时就会使用,所有的值与columns.data的规则一致- type: 'filter'description: 用于过滤搜索时使用的属性- type: 'display'description: 用于页面显示时的数据- type: 'type'description: 用于类型监测时的数据- type: 'sort'description: 用于排序时的数据description: 为DataTables请求的不同数据类型提供不同的数据,如果启用服务端模式则不需要这样设置,所有的操作都可以用数据库引擎实现,前台只需要展示- type: functiondescription: 每当DataTables请求不同类型(sort, filter, display)的数据时就会调用该方法,仅当从DOM读取数据或添加新行时才可以作为setter方法,而且当type是set时,方法返回值没有意义,其它类型会取返回值parameters:- name: rowtype: array,objectdescription: 该行的数据- name: typetype: stringdescription: 单元格请求的数据类型,预定义的类型是filter,display,type,sort- name: settype: anydescription: 当作为setter方法调用时,type的参数是set,set参数就是要设置的值,否则就是undefined- name: metatype: objectparameters:row: 该单元格所在的行索引col: 该单元格的列索引settings: DataTables设置对象description: 自1.10.1开始,新增meta参数,包含了这个单元格的额外信息searchable:type: booleandefault: truedescription: 控制该列是否允许被搜索title:type: stringdescription: 设置表头内容type:type: stringoptions:- type: date- type: num- type: num-fmt- type: html-num- type: html-num-fmt- type: html- type: stringdescription: 设置列类型-用于过滤和排序字符串处理,必须是客户端模式.DataTables有一些内置的类型.visible:type: booleandefault: truedescription: 控制该列是否显示或隐藏width:type: stringdefault: 自动检测表格内容,确定宽度
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: booleandefault: undefineddescription: 控制使用autoFill- type: objectdescription: 更细节的配置autoFilloptions:alwaysAsk:type: booleandefault: falsedescription: 设置为true则每次执行autoFill时都会进行询问columns:type: column-selectordescription: 如果是string类型,可以设置css选择器,如果是数组可以使用列索引editor:type: DataTable.Editordefault: nulldescription: 附加编辑器实例以进行数据库更新enable:type: booleandefault: truedescription: autoFill的初始启用状态focus:type: stringdefault: nulloptions:- click: 点击后出现可拖拽事件- focus: 配合KeyTable实现键盘复制粘贴- hover: 当鼠标在单元格上即可触发可拖拽事件- null: 自动识别,如果开启keyTable则是focus,否则是hoverhorizontal:type: booleandefault: truedescription: 控制允许横向拖拽update:type: booleandefault: truedescription: 是否允许前台自动更新数据并重绘,假如是服务端模式可以禁用此选项禁止页面自动刷新vertical:type: booleandefault: truedescription: 控制允许纵向拖拽language:autoFill:button:type: stringdefault: '>'description: 多填充选择器按钮文本cancel:type: stringdefault: Canceldescription: 多重填充选择器取消选项文本信息fill:type: stringdefault: Fill all cells with >i<{data}>/i<description: 完全填充类型的多填充选择器文本消息fillHorizontal:type: stringdefault: Fill cells horizontallydescription: 水平填充类型的多填充选择器文本消息fillVertical:type: stringdefault: Fill cells verticallydescription: 垂直填充填充类型的多填充选择器文本消息increment:type: stringdefault: "Increment / decrement each cell by: >input type='number' value='1'<"description: 增量填充类型的多填充选择器文本消息info:type: stringdescription: 信息消息显示在填充类型选择器的顶部
Buttons:buttons: # 按钮配置对象- type: arraydescription: 是buttons.buttons的简写- type: booleandescription: 如果为true,根据$.fn.dataTable.Buttons.defaults自动创建- type: objectdescription: buttons的详细配置options:buttons: # 这是一个数组用于配置多个按钮,里面的每个项可以是string,object,function- type: stringdescription: '可以使用内置的buttons类型,等同于对象的{extend: ...}'- type: objectdescription: 详细配置每个buttonoptions:action: # 触发时的动作函数type: functiondescription: 可以通过鼠标,触摸(手机),键盘,API(button().trigger())触发parameters:- name: etype: objectdescription: 触发的事件对象- name: dttype: DataTables.Apidescription: api实例- name: nodetype: jQuerydescription: 单击的按钮节点的jQuery实例- name: configtype: objectdescription: 按钮的配置对象attr:type: objectdescription: 该按钮设置属性available:type: functiondescription: 用于确保按钮所需依赖都准备就绪,返回true显示,否则按钮不会显示parameters:- name: dttype: DataTables.Apidescription: api实例- name: configtype: objectdescription: 按钮的配置对象className:type: stringdefault: undefineddescription: 给该按钮添加类名,可以用空格分隔添加多个类名destroy:type: functiondescription: 在button被销毁后调用的函数,一般用于取消在init中设置的事件监听,避免内存泄漏(需要搭配namespace避免误删事件监听).parameters:- name: dttype: DataTables.Apidescription: api实例- name: nodetype: jQuerydescription: 被销毁的按钮的jQuery对象- name: configtype: objectdescription: 按钮的配置对象enabled:type: booleandefault: truedescription: 设置按钮的初始状态,true为启用false为禁用extend:type: stringdescription: 定义基于哪个按钮类型,可以是内置的或自定义的按钮类型,可以进行代码复用修改部分选项而保留未修改的功能init:type: functiondescription: 给按钮设置初始化函数用于添加特定于该按钮的事件parameters:- name: dttype: DataTables.Apidescription: api实例- name: nodetype: jQuerydescription: 被销毁的按钮的jQuery对象- name: configtype: objectdescription: 按钮的配置对象key:- type: stringdescription: 监听的键盘字符,必须是单个字符,不区分大小写- type: objectoptions:key: 用于监听的单个字符shiftKey: 设置true就必须按住shift+key才会触发altKey: 设置true就必须按住alt+key才会触发ctrlKey: 设置true就必须按住ctrl+key才会触发metaKey: 设置true就必须按住window(or cmd)+key才会触发name:type: stringdescription: 给单个按钮设置name后,可以使用buttons()和button()找到该按钮,例如button('location:name')会找到name设置location的按钮namespace:type: stringdescription: 给每个按钮设置唯一的命名空间,但是不建议自定义配置,因为buttons会自动添加命名空间tag:type: stringdescription: 设置包裹按钮的标签,默认使用全局的buttons.dom.button,此选项是专为单个按钮配置的text:- type: stringdescription: 按钮文本,可以是HTML字符串- type: functiondescription: 可以使用i18n()配置国际化选项,如dt.i18n('buttons.print', 'Print')parameters:- name: dttype: DataTables.Apidescription: api实例- name: nodetype: jQuerydescription: 被销毁的按钮的jQuery对象- name: configtype: objectdescription: 按钮的配置对象titleAttr:- type: stringdescription: 给按钮添加title属性- type: functiondescription: 可以使用i18n()配置国际化选项,如dt.i18n('buttons.print', 'Print')parameters:- name: dttype: DataTables.Apidescription: api实例- name: nodetype: jQuerydescription: 被销毁的按钮的jQuery对象- name: configtype: objectdescription: 按钮的配置对象dom: # 用于控制dom构建button的选项的对象button:type: objectdescription: 单个按钮的DOM配置,默认是<a class="dt-button">...</a>options:- tag: 元素标签例如span,div,a等,不要出现其他字符- className: 标签类名,可以设置多个类名,用空格分隔- disabled: 当标签处于禁用状态时添加的类名- active: 当标签处于激活状态时添加的类名buttonContainer:type: objectdescription: 对button设置的标签元素的包裹,默认是nulloptions:- tag: 元素标签例如span,div,a等,不要出现其他字符- className: 标签类名,可以设置多个类名,用空格分隔buttonLiner:type: objectdescription: 按钮内部元素的DOM配置,默认是<span>...</span>,也可以直接设置buttonLiner为nulloptions:- tag: 元素标签例如span,a等,不要出现其他字符- className: 标签类名,可以设置多个类名,用空格分隔collection:type: objectdescription: 按钮集合的DOM配置,默认是<div class="dt-button-collection">...</div>options:- tag: 元素标签例如div,aside等,不要出现其他字符- className: 标签类名,可以设置多个类名,用空格分隔container:type: objectdescription: Buttons容器元素的DOM配置,默认是<div class="dt-buttons">...</div>options:- tag: 元素标签例如div,aside等,不要出现其他字符- className: 标签类名,可以设置多个类名,用空格分隔name:type: stringdescription: 为组选择器设置name,可以通过buttons().container('primary:name')找到设置按钮组name设置为primary的jQuery对象
ColReorder:colReorder: # 为数据表启用和配置ColReorder扩展,允许拖动列修改列的排列顺序,$.fn.dataTable.ColReorder.defaults包含默认配置项- type: booleandescription: 设置true或false配置ColReorder扩展,是{enable:...}的缩写- type: objectdescription: 设置colReorder详细配置options:enable:type: booleandefault: truedescription: 设置是否允许启用ColReorder,可以使用api控制colReorder().enable(),colReorder().disable()fixedColumnsLeft:type: integerdefault: 0description: 禁止列参与重新排序,从左侧开始计数fixedColumnsRight:type: integerdefault: 0description: 禁止列参与重新排序,从右侧开始计数order:type: arraydefault: 使用表的默认列排序description: 设置表的列排列顺序,必须包含所有列的索引,且不能重复realtime:type: booleandefault: truedescription: 设置列排序是否实时更新,如果设置为true则实时更新排序,设置为false则只有拖拽行为停止才会进行重新排序
FixedColumns:fixedColumns: # 启用和配置fixedColumns的扩展- type: booleandescription: 设置成true启用在$.fn.dataTable.FixedColumns.defaults里的默认配置- type: objectdescription: fixedColumns的详细配置options:heightMatch:type: stringdescription: 将使用的行高匹配算法options:- none: 将导致FixedColumns无法应用高度匹配(在这种情况下,CSS可能会强制进行高度匹配)- semiauto: 高度计算将执行一次，结果将被缓存以再次使用,这是行高匹配算法的默认值- auto: 每次绘制都进行高度匹配(最慢但必须准确)leftColumns:type: integerdefault: 1description: 设置左侧固定列从0开始rightColumns:type: integerdefault: 0description: 设置右侧固定列从0开始
FixedHeader:fixedHeader: # 固定表头,当表头滚动到表内容部分时,表头就会固定在顶部- type: booleandescription: 设置成true启用在$.fn.dataTable.FixedHeader.defaults里的默认配置- type: objectdescription: 设置fixedHeader详细配置options:footer:type: booleandefault: falsedescription: 是否启用footer的固定footerOffset:type: integerdefault: 0description: 设置距离底部的偏移值header:type: booleandefault: truedescription: 是否启用header的固定headerOffset:type: integerdefault: 0description: 设置距离顶部的偏移值
KeyTable:keys: # 给table添加键盘操作- type: booleandescription: 设置成true启用在$.fn.dataTable.KeyTable.defaults里的默认配置- type: objectdescription: 设置keyTable详细配置options:blurable:type: booleandefault: truedescription: 设置成false后,一旦表格获取焦点后就无法失去焦点className:type: stringdefault: focusdescription: 设置焦点的类名,当获取焦点时给单元格添加该类名  clipboard:type: booleandefault: truedescription: 启用剪切板交互功能clipboardOrthogonal:type: stringdefault: displaydescription: 设置正交数据以复制到剪贴板,也就是说这里是一个类型影响复制的类型所指向的字符串,但是粘贴不受影响columns:type: column-selector # 可以是类名,伪类或列索引组成的数组description: 设置可以获取焦点的列editOnFocus:type: booleandefault: falsedescription: 如果有Editor插件,并且设置为true,则可以在获取焦点的同时设置单元格可编辑editor:type: DataTables.Editordescription: editor实例focus:type: cell-selector # 可以是类名,伪类或列索引组成的数组description: 设置初始化获取焦点的单元格keys:type: array\nulldescription: 给keyTable添加键盘可监听的按键,如果是null则监听任意键盘tabIndex:description: 设置表的tabIndex以获取何时焦点
Responsive:columns:responsivePriority:type: integerdescription: 设置列显示的优先级.当使用responsive插件时,每列可以添加该配置,数字越低优先级越高,隐藏的时间越靠后.也可以通过给th添加data-priority属性达到同样的效果.responsive: # 启用/禁用responsive- type: booleandescription: 设置成true启用在$.fn.dataTable.Responsive.defaults里的默认配置- type: objectdescription: 设置responsive更详细的配置options:breakpoints: # 功能与responsivePriority类似,只不过是通过class的方式description: 设置响应实例的断点.默认值$.fn.dataTable.Responsive.breakpoints,这些断点class都可以添加min-,max-,not-前缀.除此之外有三个特殊的类名all(永远显示),none(当前不显示),never(永远不显示).control也是特殊的类,添加那个加号details: # 设置如何显示被responsive隐藏的列- type: booleandefault: truedescription: 设置成true启用在$.fn.dataTables.Responsive.defaults.details里的默认配置- type: objectdescription: 设置显示隐藏列的具体显示配置,覆盖$.fn.dataTables.Responsive.defaults.detailsoptions:display:type: functiondefault: $.fn.dataTable.Responsive.display.childRowdescription: 定义隐藏信息应如何显示给用户,childRow可以让用户点击控制信息显隐,childRowImmediate会立即显示所有隐藏的信息,modal()会在弹出框中显示信息,里面包含header参数(该参数赋予一个row实例作为参数的匿名函数)parameters: # 自定义这个方法,返回true或false触发隐藏信息是否被显示或隐藏的事件,返回undefined不会触发事件- name: rowtype: DataTables.Apidescription: row()返回的api实例- name: updatetype: booleandescription: true说明是自动触发的,false是用户手动触发的- name: rendertype: functiondescription: 要显示的数据信息,与renderer函数返回的字符串一样renderer:type: functiondefault: $.fn.dataTable.Responsive.renderer.listHidden()description: 定义用于显示子行的渲染器,内置渲染器在$.fn.dataTable.Responsive.renderer中,默认使用listHidden(),还有tableAll()用于显示所有列(可以配置tableClass)parameters: # 该函数返回主要是boolean或string.返回false则不显示子行,返回的HTML字符串就是要显示的信息- name: apitype: DataTables.Apidescription: DataTables api实例- name: rowIdxtype: integerdescription: 行索引- name: columnstype: arraydescription: 每个列的信息组成的数组,每个列的对象包含title,data,hidden,columnIndex,rowIndextarget:- type: integerdefault: 0description: 如果type设置为column,则target就是一个列索引(支持负数),该列必须有control类名用于显示控制显隐的按钮.如果type设置为inline,则target无效- type: stringdescription: jQuery选择器选中的元素,可以是整行或整行中的某些列type: type: stringdefault: inlinedescription: 设置子行显示控件类型,inline将第一列作为触发条件,column将整行作为触发条件,none不会显示控件orthogonal:type: stringdefault: displaydescription: 设置隐藏信息显示的正交数据请求类型,假如使用columns.render(),其中会根据不同的请求类型,返回不同的结果,默认返回display类型的数据
RowGroup:rowGroup: # 启用rowGroup插件的配置- type: booleandescription: 设置成true启用在$.fn.dataTable.RowGroup.defaults里的默认配置,相当于以第一列的数据作为分组依据- type: objectdescription: 设置rowGroup更详细的配置options:className:type: stringdefault: groupdescription: 给分组行添加类名,让它与普通行样式不同dataSrc:- type: integer/stringdefault: 0description: 假如数据源是数组则使用数组索引决定以哪一列作为分组依据,假如数据源是对象则使用columns.data作为分组依据- type: arraydescription: 是上面的数据组成的数组,可以形成多级分组行emptyDataGroup:type: string/nulldefault: No groupdescription: 如果dataSrc指向的数据源数据是null,undefined或空字符串enable:type: booleandefault: truedescription: 是否启用rowGroupendClassName:type: stringdefault: group-enddescription: 给分组末尾的行添加自定义样式endRender:- type: nulldefault: nulldescription: 不显示分组末尾的行- type: functiondescription: 函数返回值有string,node,jQuery.返回string会创建tr,td和colspan属性;返回一个tr节点里面有多个td;返回一个tr的jQuery对象,这个和节点一样parameters:- name: rowstype: DataTables.Apidescription: rows()返回的api实例- name: grouptype: stringdescription: rowGroup.dataSrc指向的数据- name: leveltype: integerdescription: 嵌套级别。最高层是索引0startClassName:type: stringdefault: group-startdescription: 给分组开头的行添加自定义样式startRender:- type: nulldescription: 不显示分组开头的行- type: functiondefault: function(rows,data){return data;}description: 函数返回值有string,node,jQuery.返回string会创建tr,td和colspan属性;返回一个tr节点里面有多个td;返回一个tr的jQuery对象,这个和节点一样parameters:- name: rowstype: DataTables.Apidescription: rows()返回的api实例- name: grouptype: stringdescription: rowGroup.dataSrc指向的数据- name: leveltype: integerdescription: 嵌套级别。最高层是索引0
RowReorder:rowReorder: # 启用rowReorder插件的配置- type: booleandescription: 设置成true启用在$.fn.dataTable.RowReorder.defaults里的默认配置,是rowReorder.enable的缩写- type: objectdescription: 设置rowReorder更详细的配置options:dataSrc: # 配置将用于重新排序数据的数据点- type: integerdefault: 0description: 数组索引- type: objectdescription: 和columns.data的设置基本相同editor:type: DataTable.Editordescription: 添加Editor实例enable:type: booleandefault: truedescription: 设置rowReorder插件是否使用,rowReorder.enable()或rowReorder.disable()formOptions:type: objectdescription: 提交数据时,设置"编辑器"表单的选项,该对象可能包含submit属性.selector:type: stringdefault: td:first-childdescription: 定义用于选择将开始拖动的元素的选择器snapx: # 拖动行的水平位置控制- type: booleandefault: falsedescription: 设置成true拖动的行会垂直跟随鼠标,水平锁定表格左侧.设置成false不受任何限制- type: integerdescription:  垂直跟随鼠标水平,锁定表格左侧的偏移量(支持正负值)update:type: booleandefault: truedescription: 控制行被放下时是否执行自动更新
Scroller:scroller: # 启用scroller插件的配置,boundaryScale:type: numberdefault: 0.5description: 边界比例,默认滚动到当前显示的一半会加载新的数据,让页面数据看起来是连续的.0会每次滚动的时候都更新,1会滚动到底部才会更新displayBuffer:type: integerdefault: 9description: Scroller应该预先缓冲以确保平滑滚动的数据量.这是一个乘法,假如表的可视窗口有400px,每行高20px,则加载缓存的行是180行loadingIndicator:type: booleandefault: falsedescription: 是否显示加载额外数据时的加载提示.如果设置成true会在加载额外数据时,显示language.loadingRecords的提示信息rowHeight: # 设置行高,每个行的高度要一致,这样才能计算总高度,但是不建议使用,使用默认的auto- type: integerdescription: 设置行高,这个是像素值- type: stringdefault: autodescription: auto是唯一的值,这样会自动判断行高serverWait:type: integerdefault: 200description: 当启用服务端模式时,这个配置会设置延迟(单位毫秒),在用户频繁滚动时减少ajax请求的频率
SearchPanes: 这个没看,感觉我用不到
Select:language:select:cells: # 配置选择单元格时info应显示的信息- type: stringdescription: 应该包含%d,用于代表选中的多少个单元格- type: objectdescription: 对象形式的cells规则与string一致,可以包含%d,对象的键可以是_,0,1,2...;其中_是必须的用于默认值设置,如果选中0,1,2个单元格就会显示0,1,2对应的值作为提示信息columns: # 配置选择列时info应显示的信息,该规则与cells规则一致- type: stringdescription: 应该包含%d,用于代表选中的多少个列- type: objectdescription: 对象形式的columns规则与string一致,可以包含%d,对象的键可以是_,0,1,2...;其中_是必须的用于默认值设置,如果选中0,1,2个列就会显示0,1,2对应的值作为提示信息rows:- type: stringdescription: 应该包含%d,用于代表选中的多少个行- type: objectdescription: 对象形式的rows规则与string一致,可以包含%d,对象的键可以是_,0,1,2...;其中_是必须的用于默认值设置,如果选中0,1,2个行就会显示0,1,2对应的值作为提示信息select:- type: booleandescription: 用于设置是否使用select插件,默认是false,可以通过初始化或select.style()来开启select插件- type: stringdescription: 这个是select.style的简写,设置选中行时添加的class- type: objectdescription: select详细配置options:blurable:type: booleandefault: falsedescription: 当用户点击表外时,是否允许表取消已选中的行className:type: stringdefault: selecteddescription: 给选中的单位添加class,可以是cell,column,row.info:type: booleandefault: truedescription: 是否在info中显示select的提示信息items:type: stringdefault: rowdescription: 设置要选择的表项(行,列或单元格).也可以使用api select.items()设置表项options:- row: 选择行- column: 选择列- cell: 选择单元格selector:type: stringdefault: td,thdescription: 当选择了select.items后,还可以设置select.selector,这是一个jQuery对象,会在该对象上添加select的选择事件,也可以通过select.selector()设置style: type: stringdefault: osdescription: 配置用户使用select时与表的交互模式.如果设置为api,用户将无法操作select.只能通过api select.style()操作.options:- api: 选择仅可以使用api选中- single: 同时只能选中一项,无法多选- multi: 可以选择多项- os: 类似文件的选择模式,可以使用Ctrl+鼠标左键执行一个一个的多选,也可以使用shift+鼠标左键执行一次多选- multi+shift: 单击行时,可以轻松进行多行选择而无需立即取消选择toggleable:type: booleandefault: falsedescription: 当点击一个选中的项时,是否允许取消选中.默认不允许取消选中
...
DataTables初始化配置选项学习相关推荐

Swiper学习之二---swiper的配置选项 ①
上一篇文章,我们大家来一起认识了Swiper的初级操作,有没有觉得很简单易学呢,哈哈哈,其实这玩意本来就不太难.我认为凡是有文档可以读的,大部分的东西都是为了方便我们使用的不是吗,所以肯定都是易懂易学 ...
Lerix的git学习笔记(3)_初始化配置（精华）
初始化配置并建立仓库配置用户 git config --global user.name "Your Name" git config --global user.email & ...
4.一起学习Highcharts 配置选项详细说明
Highcharts 配置选项详细说明 Highcharts 提供大量的配置选项参数,您可以轻松定制符合用户要求的图表,本章节为大家详细介绍Highcharts 配置选项使用说明: 参数配置(属性+事 ...
modsecurity配置指令学习
事务(transactions) Console(控制台) 1 Introduction Modsecurity是保护网络应用安全的工作.不,从零开始.我常称modsecurity为WAF(网络应用防 ...
U-BOOT中文文档概述与配置选项
前言:近期在学习U-Boot,学习过程不外乎学习文档,阅读代码.U-BOOT源码树提供的README文档讲得比较详细,可以作为一个起点,看了下网上似乎也没有完全的中文翻译,因此才有翻译的打算,一方面 ...
linux 2.6内核编译_03_配置选项注解
linux 2.6.15.6内核配置(unfinished) http://www.builder.com.cn/2007/1011/545597.shtml 注意: 不同的内核版本配置选项(或组织) ...
linux 2.6内核配置选项注解(unfinished...)
linux 2.6.15.6内核配置(unfinished) 注意: 不同的内核版本配置选项(或组织)可能不同, 但原理都是一样的! 另外, 关于compile in, compile as modu ...
Linux 2.6内核配置选项注解
inux 2.6.15.6内核配置(unfinished) 注意: 不同的内核版本配置选项(或组织)可能不同, 但原理都是一样的! 另外, 关于compile in, compile as modul ...
linux 2.6内核配置选项注解（未完成）
原文地址:http://blog.chinaunix.net/u/13991/showart_105697.html linux 2.6.15.6内核配置(unfinished) 注意: 不同的内核版 ...
DataTables初始化配置选项学习

DataTables初始化配置选项学习相关推荐

最新文章

热门文章
