Make datatables work with turbolinks

Question

I would like to use Turbolinks in my web application. However, i have some troubles with turbolinks and datatables.

Indeed, when i load my datatable for the first time, it generate the DOM for it and everythings is ok. But with turbolinks, the page is cached with the generated DOM and so when I change page and return on my datatable, all datatable feature doesn't works (paging, order, filter ...)

I think, reload the datatable when its DOM is already generated doesn't work, so i tried to destroy it before reload it : same problem

Here it's my datatable function : Datatable function

And here the call to it : call to it

Have you ever met this problem and what can i do to resolve it ?

Thanks for your responses

Answer 1

Do not initial the datetables again when return back from turbolink cache.

document.addEventListener("turbolinks:load", function() {
  "use strict";
  if ($("#users-table_wrapper").length == 0) {
    $('#users-table').DataTable();
  }
})