How to manually update datatables table with new JSON data

Question

I am using plugin jQuery datatables and load my data which I have loaded in DOM at the bottom of page and initiates plugin in this way:

var myData = [

    {

        "id": 1,

        "first_name": "John",

        "last_name": "Doe"

    }

];



$('#table').dataTable({

    data: myData

        columns: [

        { data: 'id' },

        { data: 'first_name' },

        { data: 'last_name' }

    ]

});

Now. after performing some action I want to get new data using ajax (but not ajax option build in datatables - don't get me wrong!) and update the table with these data. How can i do that using datatables API? The documentation is very confusing and I can not find a solution. Any help will be very much appreciated. Thanks.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

SOLUTION: (Notice: this solution is for datatables version 1.10.4 (at the moment) not legacy version):

CLARIFICATION Per the API documentation (1.10.15), the API can be accessed three ways

The modern definition of DataTables (upper camel case):

var datatable = $( selector ).DataTable();
The legacy definition of DataTables (lower camel case):

var datatable = $( selector ).dataTable().api();
Using the new syntax.

var datatable = ew $.fn.dataTable.Api( selector );

Then load the data like so:

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

API references:

https://datatables.net/reference/api/clear()

https://datatables.net/reference/api/rows.add()

https://datatables.net/reference/api/draw()

How to manually update datatables table with new JSON data

Sign up