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=


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

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

  2. 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 不能为空。
    `

回复 a-z 取消回复

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