0

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()
Ecnalyr
  • 5,792
  • 5
  • 43
  • 89
roram
  • 37
  • 2

2 Answers2

0

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

Tall Paul
  • 2,398
  • 3
  • 28
  • 34
0

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

Community
  • 1
  • 1
Ecnalyr
  • 5,792
  • 5
  • 43
  • 89