Question

I’ve got a Rails app utilizing pjax (pjax.heroku.com/) so that my header and navbar don’t ever reload. It’s all fine and dandy and working, BUT in one of my views I’m using a data table (datatables.net). The data table works great when you first load up the page, but if you navigate away to another page and then come back, the table doesn’t “reinitiate”, so it doesn’t work and everything looks like crap. Apparently it’s because the data tables js file isn’t getting loaded up again due to pjax.

Here’s what I’ve got:

application.js:

//= require jquery
//= require jquery_ujs
//= require pjax
//= require_tree .

In the head of application.html.erb I have:

<%= javascript_include_tag "application" %>

And then wrapped the <%= yield %> in a div with data-pjax-container.

I’m calling the data-tables js file in index.html.erb (hard-coded) underneath the table:

<script type="text/javascript" src="/data-table.js"></script>

Then in a separate custom.js file, this is what initiates the table:

$(document).pjax('a[data-pjax]');
$('.openinside').pjax('.sidebarInner');

Any idea what’s going on here? I think the table isn’t being reinitiated, but how can I make it reinitiate when the header isn’t getting loaded every time due to Pjax? I tried putting the JS link right beneath the table even and that didn’t work!

Answer 1

Not sure if this helps (since this question is from a month ago now), but I’m in a similar boat. I have a pjax datatable that loads in my in my pages coffeescript file.

So I’m calling the load on pjax:end, which does work, but I’m now looking for a way to load if it’s called normally (so either document complete or on pjax:end).

$(document).on "pjax:end", ->
  $("#leads_table").dataTable({bJQueryUI: true, sPaginationType: "full_numbers", bRetrieve: true})

Maybe this helps (or helps someone else).