DataTables碎碎念-动态更改数据

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/CutelittleBo/article/details/83275450

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()

猜你喜欢

转载自blog.csdn.net/CutelittleBo/article/details/83275450