Cannot get dataTables to format, show search, sort, paging in rails application

Question

I have created a very simple rails application with one class Users. Here are the relevant pieces, I think:

Gem file ( relevant portions ) gem 'rails', '~> 5.0.0' gem 'sqlite3' gem 'puma', '~> 3.0' gem 'sass-rails', '~> 5.0' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.2' # Use jquery as the JavaScript library gem 'jquery-rails' gem 'turbolinks', '~> 5' gem 'jquery-turbolinks' gem 'jbuilder', '~> 2.5'

gem 'jquery-datatables-rails', '~> 3.3.0'

application.js

//
//= require_self
//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .

application.css

 *= require_tree .
 *= require dataTables/jquery.dataTables
 *= require_self

index.html.erb

<p id="notice"><%= notice %></p>

<h1>Users</h1>

<table id="users">
    <thead>
       <tr>
          <th>Name</th>
          <th>Email</th>
          <th colspan="3"></th>
        </tr>
      </thead>
      <tbody>
         <% @users.each do |user| %>
           <tr>
             <td><%= user.name %></td>
             <td><%= user.email %></td>
             <td><%= link_to 'Show', user %></td>
             <td><%= link_to 'Edit', edit_user_path(user) %></td>
             <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
            </tr>
         <% end %>
       </tbody>
</table>

<br>

<%= link_to 'New User', new_user_path %>

users.coffee ( I've tried naming this users.js.coffee, to no avail )

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
jQuery ->
  $('#users').dataTable()
  "sPaginationType": "bootstrap"

routes.rb

Rails.application.routes.draw do
  resources :users
  root 'users#index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

users_controller.rb

class UsersController < ApplicationController
  before_action :set_user, only: [:show, :edit, :update, :destroy]

  # GET /users
  # GET /users.json
  def index
    @users = User.all
  end

  # GET /users/1
  # GET /users/1.json
  def show
  end

  # GET /users/new
  def new
    @user = User.new
  end

...

When I bundle install, then rails db:migrate, then rails server, I get the data showing, but without anything I expect from DataTables, viz.

How do I get the sort buttons, search area, row highlighting, and pagination to show?

John Wooten · Accepted Answer · 2016-07-26 17:19:14Z

2

Found the problem while looking over the browser debug window. I was using a colspan in the header and three td's in the table body. That caused an exception in jQuery data tables because the number of elements in the header was not equal to the number in the table.

I had to add:

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

at the top of the index.html.erb, and

<script>
  $(function(){
    $("#user-table").dataTable();
  });
</script>

just above where the link for New User was to make it format. I would like to know how to move these into either a coffee file or other external file if possible.

answered Jul 26, 2016 at 17:19

John Wooten

7551 gold badge8 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steve · Accepted Answer · 2016-07-25 22:15:14Z

0

Have you tried the dom option? https://datatables.net/reference/option/dom

answered Jul 25, 2016 at 22:15

Steve

264 bronze badges

5 Comments

John Wooten Over a year ago

No idea what that means. Will look it up. I was following simple example of using dataTables in rails. This is supposedly how they did it.

Steve Over a year ago

I'm not familiar with RoR or CoffeeScript but maybe you could try entering "dom":"ftp" under "sPaginationType": "bootstrap" in users.coffee

John Wooten Over a year ago

I've never seen that in an example. What does it mean or do? I'll try it, but what if it works? Then I need to understand it. Thanks.

Steve Over a year ago

The dom option indicates what elements of DataTables you want to appear. f is for the search bar, which DataTables calls the 'filtering input', t is for the table, and p is for the pagination at the bottom of the table.

John Wooten Over a year ago

Wow! Thanks for the explanation. Going out for a bit, will try tomorrow.

Community · Accepted Answer · 2017-05-23 11:44:22Z

0

Another possibility is that it might have something to do with the assets. The answer here hints that you may need to add the line

require dataTables/bootstrap/3/jquery.dataTables.bootstrap

to application.js and application.css

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Jul 25, 2016 at 23:01

Steve

264 bronze badges

1 Comment

John Wooten Over a year ago

Have tried all of the above to no avail. Is it possible that the formatting of the files is wrong or that the users.coffee should have more in it? I can't find documentation that actually talks about whether it is users.coffee or users.js.coffee. What is the format for coffee? Perhaps I should just put in a javascript file instead?

Collectives™ on Stack Overflow

Cannot get dataTables to format, show search, sort, paging in rails application

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related