Datatables 1.10.x
在命名上与1.9.x
的有区别,新版的使用的是驼峰的命名规则,而之前的是采用匈牙利命名规则
当然,这些变化都是向下兼容的,你可以继续使用旧版本的api方法的参数和名称。 如果你要是用新版本的api方法,请参考下面表格的对照表,大多数的都是直接从匈牙利命名到驼峰命名,极个别重命名,还添加了新的属性名称。
初始化
现在可以这样创建一个Datatables:
$(...).dataTable()
创建一个Datatables
并返回一个jquery
对象(1.9-)
$(...).DataTable()
创建一个Datatables
并返回一个新的Datatables API
实例
两种方法都可以在1.10+版本中使用
选项(Options)
匈牙利式 | 驼峰式 | 含义 |
---|---|---|
aaData | data | 给表格显示数据 |
aaSorting | order | 表格初始化排序 |
aaSortingFixed | orderFixed | Ordering to always be applied to the table |
aDataSort | columns.orderData | 定义多个列作为列的默认顺序 |
aLengthMenu | lengthMenu | 改变每页显示条数列表的选项 |
aTargets | columnDefs.targets | 适用于指定一个特定的列 |
aoColumns | columns | 列配置数组 |
aoColumnDefs | columnDefs | 列定义配置数组 |
aoSearchCols | searchCols | 给个别列定义搜索选项 |
asSorting | columns.orderSequence | 指定排序 |
asStripeClasses | stripeClasses | 在表中设置斑马条纹类的行 |
bAutoWidth | autoWidth | 让Datatables自动计算宽度 |
bDeferRender | deferRender | 延迟渲染可以提高Datatables的加载速度 |
bDestroy | destroy | 允许重新实例化Datatables |
bFilter | searching | 开启搜索功能 |
bInfo | info | 开启Datatables信息显示 |
bJQueryUI | jQueryUI | 使用jqueryui样式(需要引入jqueryui的css) |
bLengthChange | lengthChange | 允许改变每页显示的数据条数 |
bPaginate | paging | 允许表格分页 |
bProcessing | processing | 显示加载信息 |
bRetrieve | retrieve | 检索一个已存在的Datatables实例 |
bScrollAutoCss | 废弃 | |
bScrollCollapse | scrollCollapse | 开启滚动条 |
bScrollInfinite | 废弃 | |
bSearchable | columns.searchable | 定义列是否允许搜索 |
bServerSide | serverSide | 开启服务器模式 |
bSort | ordering | 是否启用Datatables排序 |
bSortable | columns.orderable | 开启或关闭某列的排序 |
bSortCellsTop | orderCellsTop | Control which cell the order event handler will be applied to in a column |
bSortClasses | orderClasses | 排序列高亮显示 |
bStateSave | stateSave | 允许浏览器缓存Datatables,以便下次恢复之前的状态 |
bUseRendered | 废弃 | Use columns.render |
bVisible | columns.visible | 列是否显示 |
fnCookieCallback | 废弃 | |
fnCreatedCell | columns.createdCell | 单元格被创建回调函数,允许dom操作 |
fnCreatedRow | createdRow | tr被创建回调函数 |
fnDrawCallback | drawCallback | 表格重绘的时候回调函数 |
fnFooterCallback | footerCallback | foot显示回调函数 |
fnFormatNumber | formatNumber | 数字格式化回调函数 |
fnHeaderCallback | headerCallback | thead显示回调函数 |
fnInfoCallback | infoCallback | 表格主要信息显示回调函数 |
fnInitComplete | initComplete | 表格加载完成回调函数 |
fnPreDrawCallback | preDrawCallback | 预绘制回调函数 |
fnRender | 废弃 | Use columns.render |
fnRowCallback | rowCallback | 行重绘回调 |
fnServerData | ajaxOption | 从 Ajax 源加载数据的表的内容,ajax 作为function用法 |
fnServerParams | ajax.dataOption | 发送给服务器的参数 |
fnStateLoad | stateLoadCallback | 定义在何处以及如何应加载已保存的状态的回调 |
fnStateLoaded | stateLoaded | 状态被读取回调 |
fnStateLoadParams | stateLoadParams | 加载状态,数据操作回调 |
fnStateSave | stateSaveCallback | 定义如何存和在哪里储表状态回调 |
fnStateSaveParams | stateSaveParams | 状态保存,数据操作回调 |
iCookieDuration | stateDuration | 状态保存的有效期 |
iDataSort | columns.orderData | 定义多个列作为列的默认顺序 |
iDeferLoading | deferLoading | 延迟加载服务器端数据直到第二次重绘 |
iDisplayLength | pageLength | 更改初始页面长度 (每页的行数) |
iDisplayStart | displayStart | 初始分页起始点 |
iScrollLoadGap | 废弃 | |
iTabIndex | tabIndex | 选项卡索引控件的键盘导航 |
mData | columns.data | 从行数据对象/数组设置列的数据源 |
mRender | columns.render | Render (process) the data for use in the table |
oLanguage.oAria.sSortAscending | language.aria.sortAscending | 用于WAI-ARIA(无障碍网页应用)属性 |
oLanguage.oAria.sSortDescending | language.aria.sortDescending | 用于WAI-ARIA(无障碍网页应用)属性 |
oLanguage.oPaginate.sFirst | language.paginate.first | 翻页中“首页”字符串 |
oLanguage.oPaginate.sLast | language.paginate.last | 翻页中“尾页”字符串 |
oLanguage.oPaginate.sNext | language.paginate.next | 翻页中“下一页”字符串 |
oLanguage.oPaginate.sPrevious | language.paginate.previous | 翻页中“上一页”字符串 |
oLanguage.sEmptyTable | language.emptyTable | 表格中没有数据时显示的字符串 |
oLanguage.sInfo | language.info | 表格主要信息显示字符串 |
oLanguage.sInfoEmpty | language.infoEmpty | 当表格没有数据和搜索记录时,表格主要信息显示字符串 |
oLanguage.sInfoFiltered | language.infoFiltered | 当使用搜索功能后,表格主要信息出追加的字符 |
oLanguage.sInfoPostFix | language.infoPostFix | 追加到所有其他主要信息字符串之后 |
oLanguage.sInfoThousands | language.thousands | 千分位分隔符 |
oLanguage.sLengthMenu | language.lengthMenu | 页面显示数据条数选项 |
oLanguage.sLoadingRecords | language.loadingRecords | 当ajax加载数据时-加载信息显示字符串 |
oLanguage.sProcessing | language.processing | 显示正在处理字符串 |
oLanguage.sSearch | language.search | 搜索框显示字符串 |
oLanguage.sUrl | language.url | 从远程加载语言信息文件url |
oLanguage.sZeroRecords | language.zeroRecords | 过滤后空的结果字符串 |
oSearch | search | 设置一个在Datatables初始化时的搜索选项 |
sAjaxDataProp | ajax.dataSrc | 表数据的数据属性或操作方法 |
sAjaxSource | ajax.urlOption | 从 Ajax 源加载数据的表的内容 |
sCellType | columns.cellType | 要为列创建的单元格类型 |
sClass | columns.className | 指定单元格样式 |
sContentPadding | contentPadding | 给文本内容添加填充被用来计算最合适的表格 |
sCookiePrefix | 废弃 | |
sDefaultContent | columns.defaultContent | 给列设置默认的,静态的内容 |
sDom | dom | 按什么顺序定义表的控制元素在页面上出现 |
sName | columns.name | 设置列的描述性名称 |
sPaginationType | pagingType | 分页按钮种类显示选项 |
sScrollX | scrollX | 水平滚动条 |
sScrollXInner | scrollXInner | 没有文档在1.10中 |
sScrollY | scrollY | 垂直滚动条 |
sServerMethod | ajax.typeOption | 从 Ajax 源加载数据的表的内容的方式 |
sSortDataType | columns.orderDataType | Live DOM sorting type assignment |
sTitle | columns.title | 给列设置名称 |
sType | columns.type | 设置用于筛选和排序字符串处理的列类型 |
sWidth | columns.width | 设置列宽 |
API
以下是旧的api转换新的,新的api有很多,下面没有全部列出来。关于如何使用它,请参考api完整信息。
匈牙利式 | 驼峰式 | 含义 |
---|---|---|
$ | $ | Perform a jQuery selection action on the full table. |
_ | row().data(), rows().data(), cell().data() | 从行、列和单元格中获取数据 |
fnAddData | row.add(), rows.add() | 给表格添加一行或多行 |
fnAdjustColumnSizing | columns.adjust() | 重新计算列的宽度 |
fnClearTable | clear() | 清除表格的所有数据 |
fnClose | row().child.hide() | 隐藏父行的子行 |
fnDeleteRow | row().remove(), rows().remove() | 从Datatables删掉一行或或者更多 |
fnDestroy | destroy() | 从当前上下文销毁掉Datatables对象 |
fnDraw | draw() | 重绘表格 |
fnFilter | search(), column().search(), columns().search() | 从表格里搜索数据 |
fnGetData | row().data(), rows().data(), cell().data() | 从列,行,单元格中获取数据 |
fnGetNodes | row().node(), rows().nodes(), cell().node() | 从列,行和单元格里获取节点 |
fnGetPosition | row().index(), cell.index() | 获取有关选定的行、 列或单元格的索引信息 |
fnIsDataTable | $.fn.dataTable.isDataTable() | 检查表格的节点是不是Datatable对象 |
fnIsOpen | row().child.isShown() | 检查子行的父行是否可见 |
fnOpen | row().child() | 使父行的子行可见 |
fnPageChange | page() | 获取/设置表的当前页 |
fnSetColumnVis | column().visible() | 获取/设置单个所选列的可见性 |
fnSettings | settings() | 获取表的设置对象 |
fnSort | order(), column().order() | 选择指定列排序 |
fnSortListener | order.listener() | 给指定的列添加排序的监听 |
fnTables | $.fn.dataTable.tables() | 在本页得到所有的Datatables |
fnUpdate | row().data(), cell().data() | 设置行或单元格的数据 |
fnVersionCheck | $.fn.dataTable.versionCheck() | 版本号码的兼容性检查功能 |