How to Dynamically Update Data in a DataTable Using AJAX

miasmith

Hi everyone,

I'm using DataTables to display data and I want to dynamically update it with AJAX every 30 seconds without page reloads. My current setup:
$('#example').DataTable({ ajax: { url: 'data_source.php', dataSrc: '' }, columns: [ { data: 'id' }, { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'age' }, { data: 'start_date' }, { data: 'salary' } ] });
I'm using ajax.reload() in a setInterval:

setInterval(function() { $('#example').DataTable().ajax.reload(); }, 30000);

This works, but I notice a flicker in the UI. How can I make this process smoother and keep the table state (sorting, filtering) intact? I also check this: https://datatables.net/forums/discussion/1443/update-dynamic-table-using-ajaxrails

Any tips or best practices?

Thanks!

colin

The sorting and filtering would be unaffected by ajax.reload(), but by default the paging is reset, so you'll return to the first page. If you want to remain on the same page, follow the second example on that reference page - it's demonstrating just that.

The flicker is probably unavoidable if the data set is fairly large. On our 57 record examples, such as here, ajax.reload() doesn't flicker at all - as it's very quick to load and draw a small number of records. If the flicker is noticable, this section of the FAQ should help, it discusses various techniques to improve performance,

Colin