api
选项(Option)
DataTables是一个可高度配置化的类库,可以在生成HTML tables过程中的所有方面实现定制。所有特性可以通过打开、关闭或者定制来满足你对表格所有的要求。
定制要先定义一个options,然后传入$().DataTable()
构造函数,通过定制options的内容来实现定制。
- 例如下面的代码
scrollYDT
和 pagingDT
选项用来允许滚动和禁止分页:
1 2 3 4 | $( '#myTable' ).DataTable( { scrollY: 300, paging: false } ); |
有非常多的配置项可以用来定制你的表格,在下面的文档中都有说明。 如果需要从整体上感知DataTables的初始化选项使用,可以阅读 手册中的配置项。
特性(Features)
名称 | 说明 |
---|---|
控制Datatables是否自适应宽度 |
|
控制Datatables的延迟渲染,可以提高初始化的速度 |
|
控制是否显示表格左下角的信息 |
|
控制是否使用jquerui的样式(需要引入jqueryui的css) |
|
是否允许用户改变表格每页显示的记录数 |
|
是否允许Datatables开启排序 |
|
是否开启本地分页 |
|
是否显示处理状态(排序的时候,数据很多耗费时间长的话,也会显示这个) |
|
设置水平滚动 |
|
设置垂直滚动 |
|
是否允许Datatables开启本地搜索 |
|
是否开启服务器模式 |
|
保存状态 - 在页面重新加载的时候恢复状态(页码等内容) |
数据(Data)
名称 | 说明 |
---|---|
ajax.dataOption
ajax.data不定时一讲
|
增加或修改通过Ajax提交到服务端的请求数据 |
ajax.dataSrcOption
columns.dataSrc 1不定时一讲
columns.dataSrc 2不定时一讲
|
数据属性或操作表数据的方法 |
ajaxOption
ajax不定时一讲
|
从一个ajax数据源读取数据给表格内容 |
dataDT
|
用来显示表格的数据 |
回调函数(Callbacks)
名称 | 说明 |
---|---|
tfoot的回调函数 |
|
createdRowOption
|
行被创建时回调函数 |
drawCallbackOption
|
表格每次重绘回调函数 |
formatNumberOption
formatNumber不定时一讲
|
数字格式化时的回调函数 |
headerCallbackOption
|
表格Header显示时的回调函数 |
infoCallbackOption
|
表格状态信息改变的回调函数 |
initCompleteOption
|
初始化结束后的回调函数 |
preDrawCallbackOption
|
表格绘制前的回调函数 |
rowCallbackOption
|
表格行(Row)绘制的回调函数 |
stateLoadCallbackOption
|
该回调函数定义了从哪里和如何读取保存的状态 |
stateLoadedOption
|
状态加载完成之后的回调函数 |
stateLoadParamsOption
|
状态加载完成之后,对数据处理的回调函数 |
stateSaveCallbackOption
|
该回调函数定义了状态该存储在什么地方及如何存储 |
stateSaveParamsOption
|
对状态进行存储时,对数据处理的回调函数 |
配置(Options)
列(Columns)
名称 | 说明 |
---|---|
columnDefs.targetsDT
|
为一个或多个列编制定义 |
columnDefsOption
|
设置定义列的初始属性 |
columns.cellTypeOption
|
为列指定一个单元格类型 |
columns.classNameOption
|
为指定的列的每个单元格都指定一个css class |
columns.contentPaddingOption
|
当计算最佳显示状态时,文字内容部分需要增加的css 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 strings used for WAI-ARIA(无障碍网页应用) specific attributes |
|
Language strings used for WAI-ARIA(无障碍网页应用) specific attributes |
|
Language strings used for WAI-ARIA(无障碍网页应用) specific attributes |
|
小数点表示字符(有些文化中用","表示小数点) |
|
当表格没有数据时,表格所显示的字符串 |
|
表格的page分页所需显示的所有字符串 |
|
当表格没有数据时,汇总地方显示的字符串 |
|
当表格搜索后,在汇总字符串上需要增加的内容 |
|
在汇总字符串上始终增加的字符串 |
|
'每页显示记录'的下拉框的提示信息 |
|
加载数据时的提示信息 - 当 Ajax请求数据时显示 |
|
分页信息的 'first' 按钮显示的信息 |
|
分页信息的 'last' 按钮显示的信息 |
|
分页信息的 'next' 按钮显示的信息 |
|
分页信息的 'previous' 按钮显示的信息 |
|
分页信息显示所需的字符串的所有信息 |
|
当table处理用户处理信息时,显示的信息字符串 |
|
搜索框的提示信息 |
|
搜索框(input)的placeholder属性 |
|
千位的分隔符 |
|
从远程地址中加载语言信息 |
|
当搜索结果为空时,显示的信息 |
|
所有DataTables的语言配置都在这里 |
静态方法(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.fillHorizontalOption
|
当你选择了不仅仅一列时,弹出提示框提示是否所选中横向也填充同样的值 |
language.autoFill.fillOption
|
弹出提示框提示是否所选中的格子都填充为相同的值 |
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.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)
名称 | 说明 |
---|---|
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扩展 |
Translation from DataTables.net, with permission
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</ins></ins>
<!--
-->
</div>