jqueryplug-inDataTableAPI中⽂⽂档参考
前⾔:最近在做⼀个WEB后台,⽆意中发现这个插件,试⽤了⼀下觉得不错,但⽹上关于它的资料⼤多不全,所以利⽤⼀些时间将其API⽂档翻了⼀下,发在园⼦⾥供⼤家参考。(p.s:个⼈E⽂⽔平很差,对着灵格斯翻出来,肯定有很多不对的地⽅,欢迎指正,但请勿喷。)
构造函数:
默认带⼀个可选参数,该参数为⼀个对象,可配置项在DataTable.defaults命名空间中定义。
⽅法和参数说明:
⼀、静态属性
⽅法或属性名参数说明返回值类型功能描述应⽤⽰例
version⽆string主要供插件开发者使⽤,⽤于检测兼容性。其输
出格式为:d.e。其中abc均为整数,d为描
述字符串(dev或beta),e也是⼀个整数,d和e
为可选项。
$.fn.dataTable.version
⼆、实例⽅法
⽅法或属性名参数说明返回值类型功能描述应⽤⽰例
(sSelector, oOpts)1、sSelector(字符串或节点名或
jquery选择字符串),指定要选取的⾏
2、oOpts(js对象,可选),对选择器
的范围进⾏再限制,即sSelector只在
这个对象规定的范围中选取。有三个
可选参数:
(1)filter(应⽤过滤):字符串,默
认值为“none",即不应⽤。只在被当
前应⽤在table中的过滤器过滤以后的
⾏中选择,如果当前table没有应⽤过
滤器,即使设置了filter:"applied"也会
在所有⾏中查。
(2)order:字符串,默认值
为”current"。这个参数默认影响返回
数组中TR元素的排序。"current"表⽰
按照表当前正在使⽤的索引列进⾏排
序,"original"表⽰按照表最初读取数
据时使⽤的索引列进⾏排序。
(3)page:限制选择是否仅限于当前
显⽰的页⾯。"current"表⽰仅限于当
前页,"all"表⽰所有页。如果此项被设
置为"current",则order会被假设
为"current",filter为"applied",也就是
说即使⼿动给这两个参数设置了不同
的值也会被忽略。jquery对象使⽤⼀个jquery选择器从表
的TR(包含在tbody中的TR)
元素中查符合条件的⾏的
集合(jquery对象)
oTable.$('tr:odd').css('backgroundColor',
'blue');
oTable.$('tr:odd', { order:
"current",page:"current"
}).css('backgroundColor', 'blue');
(sSelector, oOpts)同上匹配元素中包
含的数据,如
果选择器匹配
元素包含⾮
TR、TD或者
TH元素,则
返回数组对应
位置会是⼀个
空条⽬。使⽤⽅式基本同上⾯的$⼀样,但它返回的是所有匹配⾏的数据--也就是
说,sSelector的匹配⽬标应该是TR⾏或者是TD/TH单元格⽽不是其它的元素,因为只有这些⾏/单元格才包含数据。如果到匹配的⾏,返回的数据将是⽣成该⾏的原始数据(数组或对象),如果原始数据源来⾃于DOM,则返回⼀个通⽤数组。
这个⽅法通常和$⽅法⼀起配合使⽤,通过向两个⽅法给定同样的参数,可以保证返回数组中(⾏集合/数组)索引能够互相匹配。
注:按照说明的意思,这个⽅法应该可以获取单元格的数据,但实际通过测试只能获取⾸⾏的单元格数据,
像"tr:eq(2) td:eq(1)"这样的选择器返回的是undefined
(mData, bRedraw)1、mData:数组或者对象,必选项。表
⽰要添加到表中的数据,可以是以下
四种类型之⼀:
(1)⼀维数据数组,表⽰单⾏
(2)2维数据数组,表⽰多⾏⼀个整数数
组,表⽰各条
新增数据在内
置的aoData
数组中的索引
向表中添加⼀⾏或多⾏数
据,注意这个⽅法仅对处理
客户端数据有效(数据来⾃
于客户端脚本对象、数组或
DOM,或者初始化时指定了
oTable.fnAddData([[16, "张三", 55, "男",
"1982/12/1"], [54, "李四", 55, "男",
"1982/12/1"], [88, "王五", 55, "男",
"1982/12/1"]]);
(2)2维数据数组,表⽰多⾏
(3)单个对象,和初始化时定义的mData相对应的数据对象,表⽰单⾏(4)对象数组,同上,表⽰多⾏2、bRedraw:布尔值,可选,默认true,指⽰是否⽴即重绘表格。数组中的索引
位置。
DOM,或者初始化时指定了
sAjaxSource但没有指
定"bServerSide": true),如
果数据源指定的是“经过服务
端处理”(初始化时指定
了"bServerSide": true)的
话,要向表中添加新数据,
需要先调⽤⼀个Ajax⽅法将
数据添加到数据源中,也就
是服务端,再由服务端将数
据返回给表。
(bRedraw)1、Bredraw:布尔值,可选,默认
true,表⽰是否重绘表。⽆调⽤这个⽅法会使得
DataTable根据所包含的数据
phpstorm运行502长度和开发者给列指定的长
度(样式表、DOM中直接指
定、或者初始化时指定了
sWidth参数)重新计算列
宽,并调整表格的显⽰,这
个⽅法在表的⽗容器⼤⼩发
⽣变化时相当有⽤(⽐如浏
览器窗⼝⼤⼩变化)。
oTable.fnAdjustColumnSizing();
(bRedraw)1、bRedraw:布尔值,可选,默认为
true,表⽰是否⽴即重绘表格。⽆快速、直接的清除表中所有
数据⾏。如果bRedraw为
false,屏幕显⽰不会发⽣变
化,但像$、_⽅法已经取不
return与break的区别
到值了。
oTable.fnClearTable(false);
(nTr)1、nTr,html node(也就是TR),代表
要被“close”的⾏。成功返回0,
失败返回
1(未到匹
配的⾏)
只针对状态为“open"的⾏,
功能是关闭当前状态
为“open"的⾏。
$('#example tbody tr').click( function () {
if ( oTable.fnIsOpen(this) ) {
oTable.fnClose( this );
} else {
oTable.fnOpen( this, "Temporary
row opened", "info_row" );
}
} );
(mTarget, fnCallBack, bRedraw)1、mTarget:混合型,可以是被删除⾏
在aoData中的索引,也可以是要删除
的TR元素(⽤jqury选择器表⽰)。
2、fnCallBack:函数或者null,可
选,回调函数。删除动作开始时调
⽤,传递给此函数的参数有两个,第
⼀个是⼀个包含当前表所有初始化信
息的对象,第⼆个是将要被删除⾏的
数据数组。
3、bRedraw:布尔值,可选,默认
true。是否重绘表格。
被删除的⾏。删除表中某⾏。oTable.fnDeleteRow( 0 );
(bRemove)1、bRemove:布尔值,可选,默认
false。表⽰是否完全删除该表。如果
为true,则连原始DOM也会被删除。⽆将表恢复为原始定义的html
DOM结构,移除应⽤到table
上的样式和事件监听。
oTable.fnDestroy();
(bComplete)1、bComplete:布尔值,可选,默认
true。表⽰在重绘之前是否对表进⾏重
新过滤和重新排序。⽆重绘表。
oTable.fnDraw();
(sInput, iColumn, bRegex, bSmart, bShowGlobal, bCaseInsensitive)1、sInput:字符串,必选,指定要过滤
显⽰的某列数据的全部或⼀部分。
2、iColumn,整数或null,可选,指定
sInput要匹配的列,从0开始。
3、bRegex,布尔值,可选,默认为
false,是否将sInput视为正则表达
式。
4、bSmart,布尔值,可选,默认为
true,是否开启智能搜索。(这个API
说明有点坑,也没有⽰例,通过研究
跟踪源码才搞明⽩,如果为true,则如
果sInput包含有空格字符,则会以空格
为界将其拆分为数组,搜索同时包含
数组中每个字符串的⾏,对应数据可
以是⼀列的内容,也可以不在⼀列
中,如果为false,则将空格视为欲搜
索字符)
5、bShowGlobal:布尔值,可选,默认
true,是否在表附带的搜索输⼊框中显
⽰sInput的内容。
6、bCaseInsensitive:布尔值,可选,
默认true,是否不区分⼤⼩写
⽆对表中数据进⾏过滤。
(mRow, iCol)1、mRow:整数或tr/td/th节点。可选,
如果指定⼀个tr节点则从数据源返回整
⾏的数据,如果指定的是td/th则返回
相应单元格中的数据。如果是⼀个整
数,会把这个整数视内部数组aoData
的索引,返回对应的数据。
2、iCol:整数,可选,指定列序号。如果⽆参调
⽤,则返回全
表数据;指定
了mRow,返
回对应⾏的数
据;指定了
iCol,返回对
应单元格的数
据。
获取表的全部数据,如果指
定了⾏和列则返回对应⾏或
列的数据
(iRow)1、iRow:整数,可选,指定要获取⾏
在表中的序号。这个序号不是显⽰出
来的⾏序,⽽数据在aoData中的序
号。⽆参调⽤返回
包含所有TR
元素的数组,
指定了
iRow,只返
回对应⾏的
TR。
获取⼀个body中包含的TR节
点元素数组。
(nNode)1、nNdoe:node,可以是body中的
TR、TD、TH元素。如果nNode是
TR,则返回
该⾏在表中的
显⽰序号,即
使顺序发⽣了
变化,它返回
的还是最初的
序号;如果
nNode是单元
格,返回⼀个
数组:[⾏
序,可见列
序,全部列
序]。
返回特定单元格在表中的显
⽰位置,以数字表⽰,从0开
始,详见返回值说明。
(nTr)1、nNode:node,要检查的⾏(html
dom)。当前⾏状态为
open,则返
回true,否则
返回false。
检查⾏的状态是否为open。
(nTr, mHtml, sClass)1、nTr:node,被打开(open)的
⾏。
2、mHtml:string\node\jquery,打开
⾏后添加的html内容。
3、sClass:string,设置新添加的单
元格的样式(因为它实际⽣成的是⼀
个新⾏,包含⼀个td来放置mHtml的内
容)
打开后的添加
的新⾏,如果
未到匹配
⾏,返回
undefined。
在当前页⾯指定⾏下⾯添加
⼀个新⾏并显⽰指定的
mHtml内容。
(mAction, bRedraw)1、mAction:string/int。可取值
为:“first","previous","next","last",或
者是要跳转到的页码,注意0代表第1
页。
2、bRedraw:bool,可选,默认
true,是否重绘表格。
⽆翻页。
(iCol, bShow, bRedraw)1、iCol:int,被显⽰或隐藏的列序
号,从0开始。
html特效代码时间日期
2、bShow:bool,true为显⽰,false
jquery下载的文件怎么使用为隐藏。
3、bRedraw:bool,可选,默认为
true,是否重绘。
⽆显⽰或隐藏指定列。
()⽆指定表的配置
对象
获取指定表的配置对象。(iCol)1、iCol:int,列索引。⽆按照指定列对表进⾏排序。
(nNode, iColumn, fnCallback)1、nNode:node,要添加监听程序的
元素
2、iColumn:int,指定的索引列
3、fnCallback:function,可选,回调
函数markdown转html js
⽆给某个元素添加对应特定列
的监听处理程序。(这个⽅
法暂时还没有理解)
(mData, mRow, iColumn, bRedraw, bAction)1、mData:object/array/string,更新
数据
2、mRow:node/int,被更新的TR元
素或数组在aoData中索引。
3、iColumn:int,可选,要更新的
列。和mRow⼀起即可确定单元格位
成功返回0,
错误返回1
更新表⾏或单元格数据,该
⽅法既可以接受单⼀值,也
可以接受数组或对象
列。和mRow⼀起即可确定单元格位置。
4、bRedraw:bool,可选,默认true,是否重绘表格。
5、bAction:bool,可选,默认true,是否执⾏预重绘动作。
(sVersion)1、sVersion:string,版本号,可以
是X.Y.Z格式,也可以接受X或X.Y格
式。⼤于等于指定
版本号返回
true,否则返
回false。
对⽐当前DataTable的版本
号。
三、静态⽅法
⽅法或属性名参数说明返回值类型功能描述应⽤⽰例
(nTable)nTable,node,被检查的table元
素。是DataTable
表返回true,
否则返回false.
检查指定指定table元素是否为DataTable表。
(bVisible)bVisible:bool,可选,默认false,
是否包含被隐藏表。table node数
组(注意不是
DataTable实
例)
获取所有已经初始化的DataTable表。
(sVersion)同实例⽅法。
四、事件
事件名称传⼊参数描述
1、e,event,jquery事件对象
2、o:object,DataTable设置对象
DataTable销毁事件,调⽤fnDestroy时触发。
draw同上页⾯中表重绘时触发。也可以给fnDrawCallback指定回调函数来绑定此事件。filter同上应⽤到表的过滤条件发⽣改变时触发。
init1、2同上
3、json,对象,从服务端获取的JSON对象。instr用法
DataTable初始化完成事件,当表完成渲染、装载数据后触发。
page1、2同上页⾯改变事件,当表的当前分页发⽣变化是触发
processing1、2同上
3、bShow:boolean,DataTable是否正在执⾏动作
标记正在处理事件,(未测试成功,以下内容为个⼈理解),当DataTalbe执⾏⼀些⽐较耗时的动作时触发(如排序、过滤)。可以⽤来通知⽤户DataTable正在执⾏某个动作,或者某个操作已经完成。
sort1、2同上排序事件,表的排序条件发⽣变化时触发。
stateLoaded1、2同上
3、json:object,保存在客户端的状态信息。状态载⼊完成事件。当状态信息已经从本地存储中载⼊同时配置对象内容也按照载⼊数据修改完成时触发。
同上状态载⼊时事件。当状态信息已经从本地存储中载⼊但配置对象内容还未按照
载⼊数据修改时触发。
1、2同上
3、json:object,将要被保存的状态信息。
状态保存事件,当表的状态发⽣变化,需要重新保存状态信息时触发。
xhr1、2同上
3、json:object,从服务端返回的JSON对象。Ajax事件,当⼀个服务端Ajax请求完成时触发(注意,这个事件处理程序由fnServerData调⽤,如果改写了fnServerData,需要在你⾃⼰的success函数中⼿动触发这个事件)。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。