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.

How about deleting the existing tablebody and create it new? — Reporter
– Reporter, Commented Jan 5, 2015 at 11:20

Richard · Accepted Answer · 2020-09-01 21:16:50Z

218

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 = new $.fn.dataTable.Api( selector );

Then load the data like so:

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

Use draw(false) to stay on the same page after the data update.

API references:

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

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

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

edited Sep 1, 2020 at 21:16

Richard

62.8k40 gold badges198 silver badges277 bronze badges

answered Jan 5, 2015 at 14:20

Indy

4,9577 gold badges27 silver badges35 bronze badges

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

6 Comments

Doug Over a year ago

This was too hard to find, many thanks! Using this to persist the datatable between server roundtrips.

Hardik Masalawala Over a year ago

What about datatables version 1.9.4 I am facing same problem in that

Molasses Over a year ago

I just want to add that you can also chain the methods (i.e. datatable.clear().rows.add(newDataArray).draw()). As of this comment, I am using version 1.10.18

user3553401 Over a year ago

For once a simple and crystal clear solution about the DataTAbles API!!! Kudos, well done. You saved my day🙂

Travis Heeter Over a year ago

Great answer. I have a different problem though: how do you do this with polling? If you're constantly getting new data, how can you keep the table intact - paging for instance. So if the user is on page 2, clearing the data and redrawing resets them back to page 1.

|

Vladimirs · Accepted Answer · 2015-01-05 11:26:56Z

40

You can use:

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);

Jsfiddle

Update. And yes current documentation is not so good but if you are okay using older versions you can refer legacy documentation.

answered Jan 5, 2015 at 11:26

Vladimirs

8,6595 gold badges50 silver badges88 bronze badges

3 Comments

Indy Over a year ago

Yes, you're right, but I'm using the latest version of datatables. Anyway, I found a solution and updated my question. Thanks for your interest :)

Reporter Over a year ago

@CookieMan, please remove your edit and post it as an answer. After that, mark it as accepted.

Alok Deshwal Over a year ago

this solution is not updating pagination section

Om Prakash Sharma · Accepted Answer · 2018-06-13 20:35:45Z

14

You need to destroy old data-table instance and then re-initialize data-table

First Check if data-table instance exist by using $.fn.dataTable.isDataTable

if exist then destroy it and then create new instance like this

    if ($.fn.dataTable.isDataTable('#dataTableExample')) {
        $('#dataTableExample').DataTable().destroy();
    }

    $('#dataTableExample').DataTable({
        responsive: true,
        destroy: true
    });

answered Jun 13, 2018 at 20:35

Om Prakash Sharma

1,84023 silver badges15 bronze badges

Comments

Vikas · Accepted Answer · 2017-11-14 18:04:33Z

8

Here is solution for legacy datatable 1.9.4

    var myData = [
      {
        "id": 1,
        "first_name": "Andy",
        "last_name": "Anderson"
      }
   ];
    var myData2 = [
      {
        "id": 2,
        "first_name": "Bob",
        "last_name": "Benson"
      }
    ];

  $('#table').dataTable({
  //  data: myData,
       aoColumns: [
         { mData: 'id' },
         { mData: 'first_name' },
         { mData: 'last_name' }
      ]
  });

 $('#table').dataTable().fnClearTable();
 $('#table').dataTable().fnAddData(myData2);

answered Nov 14, 2017 at 18:04

Vikas

1011 silver badge3 bronze badges

2 Comments

Telmo Over a year ago

This works for recent version (please, consider the date of the comment). Thank you Vikas!

fp007 Over a year ago

This worked for me. But I don't understand why I can use all these examples: var datatable = $( selector ).DataTable(); var datatable = $( selector ).dataTable().api(); var datatable = new $.fn.dataTable.Api( selector ); But when adding .row().add() doesn't work.

jorge cordero · Accepted Answer · 2017-10-03 05:42:16Z

6

In my case, I am not using the built in ajax api to feed Json to the table (this is due to some formatting that was rather difficult to implement inside the datatable's render callback).

My solution was to create the variable in the outer scope of the onload functions and the function that handles the data refresh (var table = null, for example).

Then I instantiate my table in the on load method

$(function () {
            //.... some code here
            table = $("#detailReportTable").DataTable();
            .... more code here
        });

and finally, in the function that handles the refresh, i invoke the clear() and destroy() method, fetch the data into the html table, and re-instantiate the datatable, as such:

function getOrderDetail() {
            table.clear();
            table.destroy();
            ...
            $.ajax({
             //.....api call here
            });
            ....
            table = $("#detailReportTable").DataTable();
   }

I hope someone finds this useful!

answered Oct 3, 2017 at 5:42

jorge cordero

911 silver badge3 bronze badges

1 Comment

nhaberl Over a year ago

Destroying the whole table at every roundtrip is rather expensive and the state is lost also. You should consider the accepted answer where the state of the table is kept.

Nika Nabakhteveli · Accepted Answer · 2023-05-05 23:21:15Z

1

I know my answer is not directly related to the question, but I spend a lot of time on finding the way to do the same thing in the newer version of datatables, so I hope my example will save somebody's time in the future

const table = js('#tbllist').DataTable({
    columns: [
        {data: 'createDate'},
        {data: 'status'},
        {data: 'paymentType'},
        {data: 'currency'},
        {data: 'amount'}
    ]
});

// Assume that this array has objects of new data with structure defined above
const arr = [] 

// These will update table
table.clear();
table.rows.add(arr);
table.draw();

answered May 5, 2023 at 23:21

Nika Nabakhteveli

1452 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to manually update datatables table with new JSON data

6 Answers 6

6 Comments

3 Comments

Comments

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

3 Comments

Comments

2 Comments

1 Comment

Comments

Linked

Related