DataTables碎碎念-动态更改数据

最新推荐文章于 2023-04-22 16:28:51 发布

SangBigYe

最新推荐文章于 2023-04-22 16:28:51 发布

阅读量801

点赞数

CC 4.0 BY-SA版权

分类专栏： datatables js 前端文章标签： datatables js 前端

本文链接：https://blog.youkuaiyun.com/CutelittleBo/article/details/83275450

前端同时被 3 个专栏收录

7 篇文章

订阅专栏

6 篇文章

订阅专栏

datatables

4 篇文章

订阅专栏

本文介绍如何使用DataTables的JavaScript数据源加载方式展示数据，并提供了更新数据集后重新加载表格的方法。通过实例代码展示了如何初始化表格并设置列标题，以及如何清除旧数据、添加新数据并重新绘制表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript sourced data

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

Data sources

HTML (DOM) sourced data
Ajax sourced data
Javascript sourced data
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()