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() | 版本号码的兼容性检查功能 |
本文介绍了Datatables从1.9.x到1.10.x的主要更新内容,包括命名规则的变化、初始化方式的调整以及API的更新等。详细列出了新老版本在选项设置上的差异。
5666

被折叠的 条评论
为什么被折叠?



