Duplications after clicking back button

[jarrettyew]

I was navigating the page from dataTable to the show page. Once I clicked back button in the browser, the search and pagination from dataTable were duplicated as shown below.

I believe it's related to caching issue, just have no idea how to make it consistent along the way. What I did after that is to make sure it reloads the whole page if the number of datatable is more than 1. It solves the problem temporarily. I just wonder if there's a way to make sure the flow is seamless even the back button is pressed.

%table.table.table-bordered#companies
  %thead.bg-primary.white-font
    %tr
      %th Company
      %th.text-center Sales Agent
      %th.text-center Number of Employees
  %tbody
    - @companies.each do |company|
      %tr
        %td{:scope => "row"}
          = company.name
          .float-right= link_to 'View', [:comp, company, :hostels], class: 'btn btn-primary btn-sm'
        %td.text-center= company.sales_agent_name
        %td.text-center= company.workers.size

:javascript
  $(document).on('turbolinks:load', function() {
    $("#companies").dataTable();
    if ($(".dataTables_length").length > 1) {
      window.location.reload();
    }
  });

[mkhairi]

@yewness try add this in layout

%meta name="turbolinks-cache-control" content="no-cache" 

[jarrettyew]

@mkhairi Thanks it works. Doesn't this remove the caching for each layout? Seems like it will take a little bit longer to load it up.

[mkhairi]

yeah.. there is another way to fix this. https://m.phillydevshop.com/turbolinks-5-and-datatables-a882c29d6eff

[mkhairi]

$(document).on 'turbolinks:before-cache', ->
  dataTable =  $($.fn.dataTable.tables(true)).DataTable()
  if (dataTable != null)
   dataTable.destroy();
   dataTable = null;

[Sabaabdoulaye2]

How about code where no turbolinks is used? I am using django and htmx and experiencing the same issue