How to replace the Data Array in jQuery DataTables

Question

I have a DataTables table that is initially filled by a JSON Array (directly written to HTML with ASP.NET). Now I want to refresh this data with Ajax but the data simply won't be added. I want to use my own method, not DataTables' internal Ajax method. (Using DataTables 1.10.0).

$.getJSON("?ajax=1", null, function(json, status, xhr) {
    var table = $("#" + proTableId).DataTable();

    oSettings = table.settings();
    //table.clear();
    table.rows().remove();

    var data = table.data();
    for (var i = 0; i < json.length; i++)
    {
        data.push(json[i]);
    }
    table.draw();
});

The JSON result is correct but after this call the DataTable is always empty. How do I replace the Data inside the DataTables object and preferably keep sorting and filtering?

Dagojvg · Accepted Answer · 2014-06-02 09:06:11Z

1

For adding data to the data table, you have to access the property row of the data table object, and then call the add method. Finally, you update this table by calling the draw method.

As it can be seen on the Data Table documentation. You would have to do this:

for(var i= 0; i < json.length; i++){
    table.row.add([
       json[i].firstProperty,
       json[i].secondProperty
    ]).draw();
}

answered Jun 2, 2014 at 9:06

Dagojvg

4112 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kirschi Over a year ago

this works, but I had to change it a little bit table.row.add(json[i]);

Collectives™ on Stack Overflow

How to replace the Data Array in jQuery DataTables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related