Datatable 详解

基本介绍

配置

1 下载到本地

2 引用CDN

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css"><script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

3 NPM

npm install datatables.net    # Core librarynpm install datatables.net-dt # Styling

详见Datatable官网

支持的数据格式

数组格式[]

var data = [    [        "Tiger Nixon",        "System Architect"    ],    [        "Garrett Winters",        "Director"    ]]

$('#example').DataTable( {    data: data} );

对象格式{}

[    {        "name":       "Tiger Nixon",        "position":   "System Architect""    },    {        "name":       "Garrett Winters",        "position":   "Director"    }]

$('#example').DataTable( {    data: data,    columns: [        { data: 'name' },        { data: 'position' }    ]} );

注意：columns的值一定与标签一一对应

ajax传值

datatable 中有内置的ajax属性，

$('#myTable').DataTable( {    ajax: '/api/myData',    columns: [ ... ]} );// or!$('#myTable').DataTable( {    ajax: {        url: '/api/myData',        dataSrc: 'data'    },    columns: [ ... ]} );

常用参数说明

功能参数

ordering：全局控制列表的所有排序功能-默认true；
paging：翻页功能-默认true；
processing：数据加载是否出现processing提示-默认false；
scrollX：过宽是否出现水平滚动条-默认false；
scrollY：定义一个高度，超过此高度出现垂直滚动条-数字或css写法，例如 200或200px-默认 无；
searching：搜索功能 -默认 true；
serverside：当设为true时,列表的过滤,搜索和排序信息会传递到Server端进行处理,实现真翻页方案的必需属性 - 默认 false；

列参数

columns：列的初始化设置；
columnsDefs：类似columns，但是可根据target属性灵活设定列

"columnDefs":[  {    "targets" : [0],    "data":"id"    "render" : function(data,type,row, meta){        return "";              }    }]

columns.searchable：设置列是否可以过滤
columns.orderable：设置列是否允许排序
columns.visible：设置列是否可见
column.render：自定义列内容

"render": function ( data, type, row,   meta ) {    return   '<a href="'+data+'">Download</a>';}

data : 当前单元格的数据

type: 当前列的类型

row: 当前行完整的数据对象

meta: 为一个子对象,包含3个属性

row: 当前行的索引

col: 当前列的索引

settings: 当前DataTables控件的setttings对象
详细的属性可参考dataTable 参数说明

常用API

core

ajax.reload()：重载数据，可用于row.delete删除操作之后；
data()：获取所有数据；
clear：清理所有数据；
draw：重绘表格；
destroy()：销毁数据；
on()：table event listener；

Rows

row() / rows()：选取单独一行/多行
row().id() / rows().ids()：获取选择行id
row().index() / rows().indexes()：得到
row().remove() / rows().remove()：删除选中行
row().add / rows().add()：添加一行/多行

$('#example tbody').on('click','#add',function(){    t.rows.add([            "Tiger Nixon",            "System Architect"    ]).draw();}); 

row().child().hide() / row().child.hide()：隐藏所有子行/指定子行
row().child().remove() / row().child.remove()：删除子行
row().child().show() / row().child().show()：显示新子行

回调函数

fnCreateRow：创建行时候的回调函数

"fnCreateRow":function(row, data, dataindex){}

fnDrawCallback：重绘之后回调函数

"fnDrawCallback":function(setting){}

fnFooterCallback：底部的回调函数，可做总计

"fnFooterCallback": function(foot, data, start, end, display) {}

fnInitComplete：datatables初始化完毕后会调用

"fnInitComplete": function (oSettings, json) {}

fnRowCallback：行的回调函数

"fnRowCallback": function (row, data, displayIndex, displayIndexFull) {}

详细请参考Datatables中文API——回调函数

遇到的问题

1 delete之后datatable不更新

解决方法：使用 table.ajax.reload(); 重新加载ajax

$('#dataTable tbody').on('click','#delete',function(){        var id = $(this).parents('tr').children('td').children('input').val();              table.rows(table.row($(this).parents("tr")).index()).remove().draw(false);        $.ajax({            type:"POST",            url:"delete",            data:{"id":id},            success:function(){                    table.ajax.reload();                    alert("Deleted successfully!");                }            });     });

2 添加一行

解决方法：使用table.rows.add，并使用draw重绘

    table.rows.add([{        "id":null,        "name":null    }] ).draw();

3 datatable加载 优先于jquery其他组件渲染效果加载

解决方法：将渲染写在 fnInitComplete 和 fnDrawCallback 中
注意，一定要记得加fnDrawCallback 否则重绘之后无渲染结果