[更改数据对象后的DataTable重绘表

问题描述 投票:0回答:1

DataTables的.draw()方法对我不起作用,我知道我只是缺少一些东西。

$(document).ready(function() {
    var tabledata= [{a:1,b:2,c:3},{a:4,b:5,c:6}];    
    var columns = [
        { title: 'A', data: 'a' },
        { title: 'B', data: 'b' },
        { title: 'C', data: 'c' }
    ];
    var myDataTable = $('#example').DataTable({retrieve:true,data:tabledata,columns:columns,order:[[0,'desc']]});    

    myDataTable.draw();

    $("#btn").click(function(){
        $("#debug").html($("#debug").html() + "<br>" + tabledata[0].b)
        // change some piece of data 
        tabledata[0].b = 'hello world';
        // verify the change
        $("#debug").html($("#debug").html() + "<br>" + tabledata[0].b)
        // redraw the table 
        myDataTable.draw();
    });

});
<table class="dataTable" id="example">

</table>
<button id="btn">
Test
</button>  

<div id=debug></div>

DataTable的数据是“ tabledata”,即对象数组。单击按钮后,我更改了一部分数据并调用了draw()方法,但DataTable不变。

我想念什么?

jsfiddle:https://jsfiddle.net/7k5nrjb1/

jquery datatables
1个回答
0
投票
myDataTable.draw();

上述事件将在当前上下文中重绘DataTables,可以选择根据需要更新顺序,搜索和分页。(不会更新数据)

使用新近更新的JSON更新数据。您需要清除所有行并添加具有更新数据的新行。

myDataTable.clear(); // Clear your data
myDataTable.rows.add(tabledata); // Add rows with newly updated data
myDataTable.draw(); //then draw it
© www.soinside.com 2019 - 2024. All rights reserved.