DataTables碎碎念-动态更改数据

Javascript sourced data

从官网API得知，DataTables有四中数据源方式

Data sources

1. HTML (DOM) sourced data
2. Ajax sourced data
3. Javascript sourced data
4. Server-side processing

我们使用3.Javascript sourced data 的方式来加载数据

var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ]
];
var table;
$(document).ready(function() {
    table = $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );

解决方法

当我们更新了dataSet的数据，如何重新加载呢？

//先清除table中的数据
table.clear()；
//向table中添加数据
table.rows.add(dataSet);
//重新绘画表格
table.draw();

Javascript sourced data 数据加载方式：https://datatables.net/examples/data_sources/js_array.html

draw()说明：https://datatables.net/reference/api/draw()