为什么我使用 Datatables 的 Rails 应用程序在我使用后退按钮时无法正确绘制表格，但在我刷新页面时却如此？

Question

I have built a rails app, using rails 5.2.3 and ruby 2.6.3 for browsing the user logs for another application and editing its users and their status. It's a simple app and I use rails Datatables to layout the tables. When I enter the url for the site, eg https://example.com/my_app/logs , it displays the log table with sorting, pagination, etc., just as it should. If I move to my 'About' page, and from there click on the 'Back' link, it returns to the logs index view and shows the same url in the browser bar, BUT, the tables are not laid out using Datatables. If I click the reload web page on the browser, it loads and draws correctly. The back link on the About page is:

<%= link_to 'Back', logs_path %>

And the logs_path is /logs

The application.js has:

//= require_self
//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .

The logs.coffee has:

jQuery ->
        $('#posts-table').dataTable()
          sPaginationType: "full_numbers"
          bJQueryUI: true

And the views/logs/index.html.erb has for the table:

<table id="posts-table" class="display" width="900">

So I guess I'm wondering, does the placement of the jQuery Datatable statement in the logs.coffee mean that it is not included when the link is executed? If not, then where should I put the dataTable() statement and what should it look like?

Answer 1

Since you're using turbolinks, it looks like an issue with how turbolinks loads and caches the page.

You could try placing your code inside a 'turbolinks:load' listener, like this:

$(document).on 'turbolinks:load', () ->
    $('#posts-table').dataTable()
          sPaginationType: "full_numbers"
          bJQueryUI: true

Anyway, you should consider how turbolinks handles the cached page, you can find more info on the matter in this question and in this article .