CODEWITHSUNDEEP
jqueryruby-on-rails-3datatables
rixter
rixter

Reputation: 1301

Where should DataTables jQuery code go?

This is real noob question, but after searching hard for an answer, perhaps not so noob after all: Where exactly do I put the jQuery app DataTables, so that the server side processing starts working? Cannot find the answer over at datatables.net nor here under the datatables tag. (This is using Rails 3.2.2, ruby 1.9.3p362, and datatables 1.9; all required gems appear present )

My jquery source is in public/jquery.js and in public/jquery.dataTables.js

Here's what I have in my app/assets/javascripts/application.js:

//= require jquery
//= require_tree .

Here's what I have in app/assets/javascripts/genotypes.js:

$(document).ready(function() {
    $('#genotypes').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
         sAjaxSource: $('#genotypes').data('source')
    } );
} );

Here's index.html.erb for the relevant view:

<h1>Listing genotypes</h1>

<table id="genotypes" class="display" data-source="<%= genotypes_url(format: "json") %>">
  <thead>
    <tr>
      <th>Marker</th>
      <th>LabID</th>
      <th>SubjectID</th>
      <th>Box</th>
      <th>Well</th>
      <th>Allele1</th>
      <th>Allele2</th>
      <th>Run date</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
  </tbody>
</table>

<br />

<%= link_to 'New Genotype', new_genotype_path %>

So far, all that happens when I load the view for genotypes (http://localhost:3000/genotypes), I just get the column headers, and nothing else...

Any help much appreciated....

Upvotes: 0

Views: 389

Answers (2)

siekfried
siekfried

Reputation: 2964

Your javascript files should live in app/assets/javascripts/, not in the public folder. Take a look at this : http://guides.rubyonrails.org/asset_pipeline.html.

Try to move jquery.js into this directory and then, like Ryan says in the Railscasts you mentioned, add this line in your application.js :

//= require dataTables/jquery.dataTables.

Do the same with your css files and give it a try.

Hope this helps.

Upvotes: 1

Kye
Kye

Reputation: 6249

You need to reference the DataTables js and css files. DataTables works by editing the HTML in the browser. There is no server side component that I know of.

Can you check they are referenced on your page, and using Chrome or Firefox / Firebug, check that the browser is indeed able to reach them?

Upvotes: 1

Related Questions