jQuery Reload Multiple Datatables With 1 Call

Question

I have 2 datatables on the same page. I am using reload to reload them both as such:

setInterval( function () {
    jQuery('#tablepress-1').DataTable().ajax.reload();
    jQuery('#tablepress-2').DataTable().ajax.reload();
}, 30000 );

but this causes 2 calls ajax calls to the server. Server is already returning data for both tables in both calls. How to combine multiple reloads so that only 1 call is made to update both?

Chris Happy · Accepted Answer · 2018-08-14 20:16:08Z

2

Create a JSON call
and send both the content in a single ajax call.
On success, get both of the data and initialise the data table.

Example:

// Use the Fetch Api (no library)
fetch('/your/path').then(function(data) {
      $('.table1').html(data.table1);
      $('.table2').html(data.table2);
      //now initialise the tables
});

// Or use jQuery (better support)
$.ajax({
  method: 'POST',
  url: '/your/path',
  data: {}
})
  .done(function( data ) {
    $('.table1').html(data.table1);
    $('.table2').html(data.table2);
  });

edited Aug 14, 2018 at 20:16

Chris Happy

7,3352 gold badges28 silver badges54 bronze badges

answered Aug 14, 2018 at 19:35

pixellab

6084 silver badges14 bronze badges

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

3 Comments

Chris Happy Over a year ago

great answer! Could be improved with some example code :)

pixellab Over a year ago

//some rough sketch

pixellab Over a year ago

Fetch(yourpath).then(function(data){ $('.table1'). html (data.table1); $('table2').html(data.table2); //now initialise the tables });//rought sketch, send from mobile.

Collectives™ on Stack Overflow

jQuery Reload Multiple Datatables With 1 Call

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related