选项(Option)

DataTables是一个可高度配置化的类库,可以在生成HTML tables过程中的所有方面实现定制。所有特性可以通过打开、关闭或者定制来满足你对表格所有的要求。 定制要先定义一个options,然后传入$().DataTable()构造函数,通过定制options的内容来实现定制。 - 例如下面的代码 scrollYOption pagingOption 选项用来允许滚动和禁止分页:

    $('#myTable').DataTable( {
        scrollY: 300,
        paging: false
    } );

有非常多的配置项可以用来定制你的表格,在下面的文档中都有说明。 如果需要从整体上感知DataTables的初始化选项使用,可以阅读 手册中的配置项

特性(Features)

名称 说明

autoWidthOption

控制Datatables是否自适应宽度

deferRenderOption

控制Datatables的延迟渲染,可以提高初始化的速度

infoOption

控制是否显示表格左下角的信息

jQueryUIOption

控制是否使用jquerui的样式(需要引入jqueryui的css)

lengthChangeOption

是否允许用户改变表格每页显示的记录数

orderingOption

是否允许Datatables开启排序

pagingOption

是否开启本地分页

processingOption

是否显示处理状态(排序的时候,数据很多耗费时间长的话,也会显示这个)

scrollXOption

设置水平滚动

scrollYOption

设置垂直滚动

searchingOption

是否允许Datatables开启本地搜索

serverSideOption

是否开启服务器模式

stateSaveOption

保存状态 - 在页面重新加载的时候恢复状态(页码等内容)

数据(Data)

名称 说明
ajax.dataOption ajax.data不定时一讲

增加或修改通过Ajax提交到服务端的请求数据

ajax.dataSrcOption columns.dataSrc 1不定时一讲 columns.dataSrc 2不定时一讲

数据属性或操作表数据的方法

ajaxOption ajax不定时一讲

从一个ajax数据源读取数据给表格内容

dataOption

用来显示表格的数据

回调函数(Callbacks)

名称 说明
createdRowOption

行被创建时回调函数

drawCallbackOption

表格每次重绘回调函数

footerCallbackOption

tfoot的回调函数

formatNumberOption formatNumber不定时一讲

数字格式化时的回调函数

headerCallbackOption headerCallback不定时一讲

表格Header显示时的回调函数

infoCallbackOption infoCallback不定时一讲 改变表格状态信息的回调函数
initCompleteOption

初始化结束后的回调函数

preDrawCallbackOption preDrawCallback不定时一讲

表格绘制前的回调函数

rowCallbackOption rowCallback不定时一讲

表格行(Row)绘制的回调函数

stateLoadCallbackOption stateLoadCallback不定时一讲

该回调函数定义了从哪里和如何读取保存的状态

stateLoadedOption stateLoaded不定时一讲

状态加载完成之后的回调函数

stateLoadParamsOption stateLoadParams不定时一讲

状态加载完成之后,对数据处理的回调函数

stateSaveCallbackOption stateSaveCallback不定时一讲

该回调函数定义了状态该存储在什么地方及如何存储

stateSaveParamsOption stateSaveParams不定时一讲

对状态进行存储时,对数据处理的回调函数

配置(Options)

名称 说明
deferLoadingOption

延迟请求加载服务端的数据,直到表格第二次绘制

destroyOption

销毁所有符合选择的table,并且用新的options重新创建表格

displayStartOption displayStart不定时一讲

初始化显示的时候从第几条数据开始显示(一开始显示第几页)

domOption dom不定时一讲

定义DataTables的组件元素的显示和显示顺序

lengthMenuOption lengthMenu不定时一讲

定义在每页显示记录数的select中显示的选项

orderOption order不定时一讲

表格在初始化的时候的排序

orderCellsTopOption 控制表头(colspan rowspan 表头)的哪一个单元格可以应用于该列的排序响应
orderClassesOption 高亮显示表格中排序的列
orderFixedOption 排序始终作用于表格
orderMultiOption 多列排序控制
pageLengthOption 改变初始化页长度(每页多少条数据)
pagingTypeOption 分页按钮显示选项
rendererOption 显示组件渲染器类型
retrieveOption

检索已经存在的Datatables实例

rowIdOption rowId不定时一讲 数据属性,Datatables在渲染的时候给 trTag设置的ID
scrollCollapseOption scrollCollapse不定时一讲

当显示更少的记录时,是否允许表格减少高度

search.caseInsensitiveOption search.caseInsensitive不定时一讲

在搜索或者过滤时,是否大小写敏感

search.regexOption search.regex不定时一讲

允许或者禁止对在搜索字符串中出现的正则表达式字符强制编码

search.searchOption search.search不定时一讲

初始化时的表格的过滤(搜索)条件

search.smartOption search.smart不定时一讲

允许或者禁止DataTables的只能过滤(搜索)功能

searchOption search不定时一讲

设置一个全局的过滤条件

searchColsOption searchCols不定时一讲

给每一列定义一个初始的搜索条件

searchDelayOption searchDelay不定时一讲

设定搜索的间隔时间。

stateDurationOption 状态保存有效期
stripeClassesOption stripeClasses不定时一讲

设置斑马条(奇偶行)的css class

tabIndexOption Tab键控制键盘导航

列(Columns)

名称 说明
columnDefs.targetsDT

为一个或多个列编制定义

columnDefsOption

设置定义列的初始属性

columns.cellTypeOption 为创建列设置单元格类型
columns.classNameOption 给列中每个单元格指定一个或多个class
columns.contentPaddingOption 当表格计算最佳值为文本内容添加填充(padding)
columns.createdCellOption 单元格创建回调以允许操作DOM
columns.dataOption

设置列的数据源,即如何从整个Table的数据源(object / array)中获得

columns.defaultContentOption columns.defaultContent不定时一讲

设定该列的默认、静态的内容

columns.nameOption 给列设置一个描述名称
columns.orderableOption 开启/禁用这列是否排序
columns.orderDataOption 定义多个列的排序作为一列的默认顺序
columns.orderDataTypeOption 给列分配实时DOM排序类型
columns.orderSequenceOption 定义列排序的方向
columns.renderOption columns.render 1不定时一讲 columns.render 2不定时一讲 columns.render 3不定时一讲 columns.render 4不定时一讲

在列上处理数据的函数,可以再次自定义显示内容

columns.searchableOption 开启或者关闭此列中数据过滤
columns.titleOption 设置列的标题
columns.typeOption

设定该列的类型 - 在该列排序或者搜索的时候使用

columns.visibleOption 允许或者禁止列的显示
columns.widthOption columns.width不定时一讲

设定列宽

columnsOption

设定列的所有初始属性

国际化(Internationalisation)

名称 说明

language.aria.sortAscendingDT

Language strings used for WAI-ARIA(无障碍网页应用) specific attributes

language.aria.sortDescendingDT

Language strings used for WAI-ARIA(无障碍网页应用) specific attributes

language.ariaDT

Language strings used for WAI-ARIA(无障碍网页应用) specific attributes

language.decimalOption 小数点表示字符(有些语言中用","表示小数点)
language.emptyTableOption 用来描述表格没有数据的字符串
language.infoOption 用来描述表格主要信息的字符串
language.infoEmptyOption 用来描述当表格没有记录的时候显示的字符串
language.infoFilteredOption 当表格过滤的时候,将此字符串附加到主要信息
language.infoPostFixOption 在摘要信息后继续追加的字符串
language.lengthMenuOption 用来描述页面长度选项的字符串
language.loadingRecordsOption 用来描述数据在加载中等待的提示字符串 - 当异步读取数据的时候显示
language.aria.paginate.firstOption 首页(_first_)按钮的 WAI-ARIA(无障碍网页应用) 标签
language.paginate.lastOption 用来描述分页控件_最后一页_按钮的字符串
language.paginate.nextOption 用来描述分页控件_下一页_按钮的字符串
language.paginate.previousOption 用来描述分页控件_上一页_按钮的字符串
language.paginateOption 分页控件所有字符串的对象属性
language.processingOption 用来描述加载进度的字符串
language.searchOption 用来描述搜索输入框的字符串
language.searchPlaceholderOption 搜索输入框元素占位符属性
language.thousandsOption 千分位分隔符

language.urlDT

从远程地址中加载语言信息

languageOption DataTables语言配置选项

language.zeroRecordsDT

当搜索结果为空时,显示的信息

静态方法(Static)

名称 说明
$.fn.dataTable.ext.errModeOption 设置Datatables侦查到错误后的报错方式

自动填充(AutoFill)

名称 说明
autoFill.alwaysAskOption 总是询问用户操作是否执行
autoFill.columnsOption 设置选择的列可以自动填充
autoFill.editorOption 附加一个Editor实例,以便自动填充数据变更数据后更新到数据库里
autoFill.focusOption 设置触发填充动作方式,比如点击、移动到或者是通过键盘字母
autoFill.updateOption 控制当拖拽完成后,数据是否立马更新显示
autoFillOption 启用和配置Datatables的AutoFill扩展功能
language.autoFill.buttonOption 弹出提示框中执行填充的按钮文字
language.autoFill.cancelOption 弹出提示框中取消的文字提示
language.autoFill.fillOption 弹出提示框提示是否所选中的格子都填充为相同的值
language.autoFill.fillHorizontalOption 当你选择了不仅仅一列时,弹出提示框提示是否所选中横向也填充同样的值
language.autoFill.fillVerticalOption 当你选择了不仅仅一列时,弹出提示框提示是否所选中纵向也填充同样的值
language.autoFill.incrementOption 当你选择的填充列是纯数字时,弹出的提示框提示数值是否增量或者是相同值
language.autoFill.infoOption 现在在弹出提示框的顶部提示信息,用来告诉用户接下来该怎么操作
language.autoFillOption 所有autoFill相关的语言文字都在这个属性下配置

按钮(Buttons)

名称 说明
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.buttonOption 单个按钮元素的Dom配置
buttons.dom.buttonContainerOption 一个按钮容器Dom配置
buttons.dom.buttonLinerOption 一个按钮边框Dom配置
buttons.dom.collectionOption 一组按钮显示的Dom配置
buttons.dom.containerOption 所有按钮的容器Dom配置
buttons.domOption 控制按钮Dom的创建的结构
buttons.nameOption 设置组选择器的实例名称
buttonsOption 按钮配置对象

拖动列(ColReorder)

名称 说明
colReorder.fixedColumnsLeftOption 不允许第X列重新排序(从左往右数)
colReorder.fixedColumnsRightOption 不允许第X列重新排序(从右往左数)
colReorder.orderOption 设置一个默认的列顺序
colReorder.realtimeOption 启用或者禁止拖动的实时效果
colReorderOption 打开和配置Datatables的ColReorder扩展

编辑器(Editor)

名称 说明
columns.editFieldOption 定义那些字段应该触发编辑

固定列(FixedColumns)

名称 说明
fixedColumns.heightMatchOption 选择行高匹配算法
fixedColumns.leftColumnsOption 设置列的数量固定在表格左边
fixedColumns.rightColumnsOption 设置列的数量固定在表格右边
fixedColumnsOption 打开和配置Datatables的FixedColumns扩展

http://datatables.net/reference/option/

Translation from DataTables.net, with permission

站内搜索

赞助我们

赞助我们

您的支持,将是我们前进的最大动力……