DataTables是一个可高度配置化的类库,可以在生成HTML tables过程中的所有方面实现定制。所有特性可以通过打开、关闭或者定制来满足你对表格所有的要求。
定制要先定义一个options,然后传入$().DataTable()
构造函数,通过定制options的内容来实现定制。
- 例如下面的代码
scrollYOption
和
pagingOption
选项用来允许滚动和禁止分页:
$('#myTable').DataTable( { scrollY: 300, paging: false } );
有非常多的配置项可以用来定制你的表格,在下面的文档中都有说明。 如果需要从整体上感知DataTables的初始化选项使用,可以阅读 手册中的配置项。
名称 | 说明 |
---|---|
控制是否使用jquerui的样式(需要引入jqueryui的css) |
|
控制Datatables是否自适应宽度 |
|
控制是否显示表格左下角的信息 |
|
是否允许用户改变表格每页显示的记录数 |
|
是否允许Datatables开启排序 |
|
是否开启本地分页 |
|
是否显示处理状态(排序的时候,数据很多耗费时间长的话,也会显示这个) |
|
设置水平滚动 |
|
设置垂直滚动 |
|
是否允许Datatables开启本地搜索 |
|
是否开启服务器模式 |
|
保存状态 - 在页面重新加载的时候恢复状态(页码等内容) |
|
控制Datatables的延迟渲染,可以提高初始化的速度 |
名称 | 说明 |
---|---|
ajax.dataOption
|
增加或修改通过Ajax提交到服务端的请求数据 |
ajax.dataSrcOption
|
数据属性或操作表数据的方法 |
ajaxOption
|
从一个ajax数据源读取数据给表格内容 |
dataOption
|
用来显示表格的数据 |
名称 | 说明 |
---|---|
tfoot的回调函数 |
|
createdRowOption
|
行被创建时回调函数 |
drawCallbackOption
|
表格每次重绘回调函数 |
formatNumberOption
|
数字格式化时的回调函数 |
headerCallbackOption
|
表格Header显示时的回调函数 |
infoCallbackOption
|
改变表格状态信息的回调函数 |
initCompleteOption
|
初始化结束后的回调函数 |
preDrawCallbackOption
|
表格绘制前的回调函数 |
rowCallbackOption
|
表格行(Row)绘制的回调函数 |
stateLoadCallbackOption
|
该回调函数定义了从哪里和如何读取保存的状态 |
stateLoadedOption
|
状态加载完成之后的回调函数 |
stateLoadParamsOption
|
状态加载完成之后,对数据处理的回调函数 |
stateSaveCallbackOption
|
该回调函数定义了状态该存储在什么地方及如何存储 |
stateSaveParamsOption
|
对状态进行存储时,对数据处理的回调函数 |
名称 | 说明 |
---|---|
deferLoadingOption
|
延迟请求加载服务端的数据,直到表格第二次绘制 |
destroyOption
|
销毁所有符合选择的table,并且用新的options重新创建表格 |
displayStartOption
|
初始化显示的时候从第几条数据开始显示(一开始显示第几页) |
domOption
|
定义DataTables的组件元素的显示和显示顺序 |
lengthMenuOption
|
定义在每页显示记录数的 |
orderCellsTopOption
|
控制表头(colspan rowspan 表头)的哪一个单元格可以应用于该列的排序响应 |
orderClassesOption
|
高亮显示表格中排序的列 |
orderFixedOption
|
排序始终作用于表格 |
orderMultiOption
|
多列排序控制 |
orderOption
|
表格在初始化的时候的排序 |
pageLengthOption
|
改变初始化页长度(每页多少条数据) |
pagingTypeOption
|
分页按钮显示选项 |
rendererOption
|
显示组件渲染器类型 |
retrieveOption
|
检索已经存在的Datatables实例 |
rowIdOption
|
数据属性,Datatables在渲染的时候给 trTag 设置的ID
|
scrollCollapseOption
|
当显示更少的记录时,是否允许表格减少高度 |
search.caseInsensitiveOption
|
在搜索或者过滤时,是否大小写敏感 |
search.regexOption
|
允许或者禁止对在搜索字符串中出现的正则表达式字符强制编码 |
search.searchOption
|
初始化时的表格的过滤(搜索)条件 |
search.smartOption
|
允许或者禁止DataTables的只能过滤(搜索)功能 |
searchColsOption
|
给每一列定义一个初始的搜索条件 |
searchDelayOption
|
设定搜索的间隔时间。 |
searchOption
|
设置一个全局的过滤条件 |
stateDurationOption
|
状态保存有效期 |
stripeClassesOption
|
设置斑马条(奇偶行)的css class |
tabIndexOption
|
Tab键控制键盘导航 |
名称 | 说明 |
---|---|
columnDefs.targetsDT
|
为一个或多个列编制定义 |
columnDefsOption
|
设置定义列的初始属性 |
columns.cellTypeOption
|
为创建列设置单元格类型 |
columns.classNameOption
|
给列中每个单元格指定一个或多个class |
columns.contentPaddingOption
|
当表格计算最佳值为文本内容添加填充(padding) |
columns.createdCellOption
|
单元格创建回调以允许操作DOM |
columns.dataOption
|
设置列的数据源,即如何从整个Table的数据源(object / array)中获得 |
columns.defaultContentOption
|
设定该列的默认、静态的内容 |
columns.nameOption
|
给列设置一个描述名称 |
columns.orderableOption
|
开启/禁用这列是否排序 |
columns.orderDataOption
|
定义多个列的排序作为一列的默认顺序 |
columns.orderDataTypeOption
|
给列分配实时DOM排序类型 |
columns.orderSequenceOption
|
定义列排序的方向 |
columns.renderOption
|
在列上处理数据的函数,可以再次自定义显示内容 |
columns.searchableOption
|
开启或者关闭此列中数据过滤 |
columns.titleOption
|
设置列的标题 |
columns.typeOption
|
设定该列的类型 - 在该列排序或者搜索的时候使用 |
columns.visibleOption
|
允许或者禁止列的显示 |
columns.widthOption
|
设定列宽 |
columnsOption
|
设定列的所有初始属性 |
名称 | 说明 |
---|---|
language.aria.paginate.firstOption
|
首页(_first_)按钮的 WAI-ARIA(无障碍网页应用) 标签 |
language.decimalOption
|
小数点表示字符(有些语言中用","表示小数点) |
language.emptyTableOption
|
用来描述表格没有数据的字符串 |
language.infoEmptyOption
|
用来描述当表格没有记录的时候显示的字符串 |
language.infoFilteredOption
|
当表格过滤的时候,将此字符串附加到主要信息 |
language.infoOption
|
用来描述表格主要信息的字符串 |
language.infoPostFixOption
|
在摘要信息后继续追加的字符串 |
language.lengthMenuOption
|
用来描述页面长度选项的字符串 |
language.loadingRecordsOption
|
用来描述数据在加载中等待的提示字符串 - 当异步读取数据的时候显示 |
language.paginate.firstOption
|
用来描述分页控件_第一页_按钮的字符串 |
language.paginate.lastOption
|
用来描述分页控件_最后一页_按钮的字符串 |
language.paginate.nextOption
|
用来描述分页控件_下一页_按钮的字符串 |
language.paginate.previousOption
|
用来描述分页控件_上一页_按钮的字符串 |
language.paginateOption
|
分页控件所有字符串的对象属性 |
language.processingOption
|
用来描述加载进度的字符串 |
language.searchOption
|
用来描述搜索输入框的字符串 |
language.searchPlaceholderOption
|
搜索输入框元素占位符属性 |
language.thousandsOption
|
千分位分隔符 |
language.urlOption
|
从远程文件读取国际化信息 |
language.zeroRecordsOption
|
用来描述当表格过滤记录为空时的字符串 |
languageOption
|
DataTables语言配置选项 |
Language strings used for WAI-ARIA(无障碍网页应用) specific attributes |
|
Language strings used for WAI-ARIA(无障碍网页应用) specific attributes |
|
Language strings used for WAI-ARIA(无障碍网页应用) specific attributes |
名称 | 说明 |
---|---|
$.fn.dataTable.ext.errModeOption
|
设置Datatables侦查到错误后的报错方式 |
名称 | 说明 |
---|---|
autoFill.alwaysAskOption
|
总是询问用户操作是否执行 |
autoFill.columnsOption
|
设置选择的列可以自动填充 |
autoFill.editorOption
|
附加一个Editor实例,以便自动填充数据变更数据后更新到数据库里 |
autoFill.focusOption
|
设置触发填充动作方式,比如点击、移动到或者是通过键盘字母 |
autoFill.updateOption
|
控制当拖拽完成后,数据是否立马更新显示 |
autoFillOption
|
启用和配置Datatables的AutoFill扩展功能 |
language.autoFill.buttonOption
|
弹出提示框中执行填充的按钮文字 |
language.autoFill.cancelOption
|
弹出提示框中取消的文字提示 |
language.autoFill.fillHorizontalOption
|
当你选择了不仅仅一列时,弹出提示框提示是否所选中横向也填充同样的值 |
language.autoFill.fillOption
|
弹出提示框提示是否所选中的格子都填充为相同的值 |
language.autoFill.fillVerticalOption
|
当你选择了不仅仅一列时,弹出提示框提示是否所选中纵向也填充同样的值 |
language.autoFill.incrementOption
|
当你选择的填充列是纯数字时,弹出的提示框提示数值是否增量或者是相同值 |
language.autoFill.infoOption
|
现在在弹出提示框的顶部提示信息,用来告诉用户接下来该怎么操作 |
language.autoFillOption
|
所有autoFill相关的语言文字都在这个属性下配置 |
名称 | 说明 |
---|---|
buttons.buttons.actionOption
|
按钮触发后的动作 |
buttons.buttons.availableOption
|
确保一个按钮所需要的都满足了才初始化按钮 |
buttons.buttons.classNameOption
|
给按钮加上class名称 |
buttons.buttons.destroyOption
|
当按钮被摧毁时调用的一个Function |
buttons.buttons.enabledOption
|
设置按钮的初始启用状态 |
buttons.buttons.extendOption
|
定义一个按钮是基于什么样的功能 |
buttons.buttons.initOption
|
初始化函数,给按钮添加具体的事件 |
buttons.buttons.keyOption
|
定义一个key来激活按钮 |
buttons.buttons.nameOption
|
给每个选项定义一个名称 |
buttons.buttons.namespaceOption
|
给每个按钮不同的命名空间 |
buttons.buttons.textOption
|
按钮上显示的文字 |
buttons.buttons.titleAttrOption
|
按钮上 title 属性上的文字提示
|
buttons.buttonsOption
|
创建一组按钮 |
buttons.dom.buttonContainerOption
|
一个按钮容器Dom配置 |
buttons.dom.buttonLinerOption
|
一个按钮边框Dom配置 |
buttons.dom.buttonOption
|
单个按钮元素的Dom配置 |
buttons.dom.collectionOption
|
一组按钮显示的Dom配置 |
buttons.dom.containerOption
|
所有按钮的容器Dom配置 |
buttons.domOption
|
控制按钮Dom的创建的结构 |
buttons.nameOption
|
设置组选择器的实例名称 |
buttonsOption
|
按钮配置对象 |
名称 | 说明 |
---|---|
colReorder.fixedColumnsLeftOption
|
不允许第X列重新排序(从左往右数) |
colReorder.fixedColumnsRightOption
|
不允许第X列重新排序(从右往左数) |
colReorder.orderOption
|
设置一个默认的列顺序 |
colReorder.realtimeOption
|
启用或者禁止拖动的实时效果 |
colReorderOption
|
打开和配置Datatables的ColReorder扩展 |
名称 | 说明 |
---|---|
columns.editFieldOption
|
定义那些字段应该触发编辑 |
名称 | 说明 |
---|---|
fixedColumns.heightMatchOption
|
选择行高匹配算法 |
fixedColumns.leftColumnsOption
|
设置列的数量固定在表格左边 |
fixedColumns.rightColumnsOption
|
设置列的数量固定在表格右边 |
fixedColumnsOption
|
打开和配置Datatables的FixedColumns扩展 |
Translation from DataTables.net, with permission