CODEWITHSUNDEEP
jquerydatatables
Bill in Kansas City
Bill in Kansas City

Reputation: 360

DataTable redrawing table after data object has changed

The DataTables' .draw() method isn't working for me, and I know I'm just missing something.

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

The data for the DataTable is "tabledata", an array of objects. On the button click, I change a piece of that data and call the draw() method, but the DataTable doesn't change.

What am I missing?

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

Upvotes: 1

Views: 4455

Answers (1)

Sreeraj_ms
Sreeraj_ms

Reputation: 551

myDataTable.draw();

above event will Redraw the DataTables in the current context, optionally updating ordering, searching and paging as required.(will not update data)

To Update data with newly updated JSON . You need to clear all rows and add new rows with updated data.

myDataTable.clear(); // Clear your data
myDataTable.rows.add(tabledata); // Add rows with newly updated data
myDataTable.draw(); //then draw it

Upvotes: 3

Related Questions