Data Tables for Ruby on Rails

Question

I am having an issue with the data table (a table that includes search, sort, and pagination) that I implemented on my website using a Ruby on Rails 5.0 framework. I added this jQuery code (code below): in one of my .js files, which I followed all of the steps from rails cast (episode 340). The implementation works after I refresh my webpage. Need help--I am trying to figure out why I need to keep refreshing in order for my table to show all features of data table?

jQuery ->
  $('#reviews').dataTable()

Answer 1

So this seems to point to a turbo link issue which can happen where turbolinks thinks that it is helping out when it really messing up your loaded javascript/jquery component. How to deal with this is to add the code data: { no_turbolink: true } to the end of your links that bring you to this page. Below I put an example from a past project I have worked on.

    <li><%= link_to 'Schedule', schedule_path(@schedule), data: { no_turbolink: true }, class: 'sub_link' %></li>

If you are looking into how to do pagination and sorting I recommend checking out ransack for sorting/filtering and will paginate for learning pagination

Answer 2

I second Tall Paul's notion that this is probably a turbolinks issue.

An alternative to his solution is to have your javascript/jQuery code listen to the turbolinks:load event rather than the ready event (which is typically what everyone does).

Something like this:

$( document ).on('turbolinks:load', function() {
  <Your javascript here>
})

I think you are using Coffeescript, so I think this would also work:

$(document).on 'turbolinks:load', ->
  $('#reviews').dataTable()

Further reading : https://stackoverflow.com/a/36110790/1026898