DataTables only loads on page refresh

Question

In my Rails 4 application, if I visit a page with a DataTable from another URL, it loads just the plain HTML table. But, if I reload the page, the DataTable appears and functions normally. Here's the coffeescript I'm using to run the table.

app/assets/javascript/employees.coffee

jQuery ->

  $('#margin-table1').dataTable().fnDestroy() # prevent duplication error
  $('#margin-table1').dataTable
    'dom' : 'TC<"clear">lftip'
    'bPaginate' : false
    'bInfo' : false
    tableTools: {
      "sSwfPath": "/copy_csv_xls_pdf.swf"
    }

app/assets/javascript/application.js

//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require dataTables.colVis
//= require dataTables.tableTools
//= require jquery.purr
//= require dataTables/jquery.dataTables
//= require chartkick
//= require_tree .

app/assets/stylesheets/application.css

*= require_tree .
*= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
*= require dataTables/extras/dataTables.colVis
*= require dataTables/extras/dataTables.tableTools
*= require_self

[Similar question here](http://stackoverflow.com/questions/13336269/jquery-plugin-datatables-only-loads-properly-on-page-refresh) but no solid answers. Should I have just put a bounty on this question? There are some minute differences (PHP vs Rails). — nicholas79171, Jun 16 '15 at 19:26
@DhirajBodicherla On reloading the page to get the table to work, I see a `Reference Error: jQuery not defined` error from Bootstrap. Post updated with `application.js` and `application.css` files. — nicholas79171, Jun 16 '15 at 20:38
the error seems to be because of jquery. Try placing jquery above bootstrap for starters. — Dhiraj, Jun 16 '15 at 21:09
@DhirajBodicherla I can't because of [this error.](http://stackoverflow.com/questions/10218587/twitter-bootstrap-drop-down-suddenly-not-working) — nicholas79171, Jun 16 '15 at 21:10

score 4 · Accepted Answer · answered Mar 05 '16 at 12:29

Okay, I think I understand your problem enough to provide an answer. The thing about using turbolinks is that most plugins and libraries that bind to the document ready event stop working, since turbolinks prevents the browser from reloading the page. There are tricks to fix those issues, but the easiest way to fix it is to use jquery.turbolinks.

To use it, just add this to your Gemfile

gem 'jquery-turbolinks'

and this to your assets/javascripts/application.js file:

//= require jquery.turbolinks

and restart your server, it will be working properly.

I had exactly this behavior and your solution worked fine. – John Creamer Jul 21 '16 at 15:58 — John Creamer, Jul 21 '16 at 15:58

score 1 · Answer 2 · answered Jul 20 '18 at 07:06

If calling the .DataTable method upon DOM load, instead of:

$(document).ready(function() {
    $('#data-table').DataTable();
} );

Use the following to wait for turbolinks to have finished loading (Rails 5)

$(document).on('turbolinks:load', function() {
    $('#data-table').DataTable();
} );

DataTables only loads on page refresh

2 Answers2