ASPIRE

jQuery中表格插件dataTables的使用

=Start=

缘由：

在写Web应用的时候要用到DataTables插件进行内容展示，从不会到勉强能用的过程中碰到了不少问题，在此记录一下，方便以后参考。

正文：

一、选择Datatables的控制元素及其顺序
二、若Datatables中出现特别长的行，该如何处理？
方法1：省略号或换行显示
省略号
table { table-layout: fixed; }
td {
    overflow: hidden;
    text-overflow: ellipsis;
}
换行显示
table { table-layout: fixed; }
td { word-wrap:break-word; }
方法2：滚动条
$('#example').dataTable( {
  "scrollX": true,
} );
方法3：自动折行
<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
</table>
三、DataTables如何动态选择要显示哪些列？

常见错误：
Uncaught Cannot extend unknown button type: colvis

解决办法：
在页面中引入 buttons.colVis.min.js 文件。

使用方法：

$('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        {
            ...
            extend: 'colvis', columns: ':not(:first-child)',
            或
            extend: 'colvis', columns: ':gt(0)',
            ...
        }
    ]
} );
四、如何销毁一个已经存在的Datatables实例？
五、如何修改/替换原有Datatables表格中的内容？
方法一：
jQuery('#example').dataTable().fnDestroy();

方法二：
jQuery('#example').dataTable({
  "bDestroy": true,
  "aaData": datas,
  ...
});
更多参考链接：

=END=

admin

, ,
,

《 “jQuery中表格插件dataTables的使用” 》 有 5 条评论

  1. Datatables 1.10.x在命名上与1.9.x的有区别，新版的使用的是驼峰的命名规则，而之前的是采用匈牙利命名规则。
    当然，这些变化都是向下兼容的，你可以继续使用旧版本的api方法的参数和名称。 如果你要是用新版本的api方法，请参考下面表格的对照表，大多数的都是直接从匈牙利命名到驼峰命名，极个别重命名，还添加了新的属性名称。
    http://datatables.club/upgrade/1.10-convert.html

    回复

  3. Datatable 从0使用的错误记录
    http://datatables.club/faqs/

    1、弹出提示 Datatables warning:Non-table node initialisation (DIV)
    https://datatables.net/manual/tech-notes/2
    `
    此时，页面内容就只有一个 。
    出现这个情况可能是因为你定义的 id 在非 table 元素上。只要你在里面再加一个 即可。
    `

    2、控制台错误 Uncaught TypeError: Cannot read property ‘aDataSort’ of undefined
    https://stackoverflow.com/questions/28454203/jquery-datatables-cannot-read-property-adatasort-of-undefined
    `
    此时，页面内容就只有一个 里放着一个 。
    因为 即 THEAD 不能为空。
    `

    回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注