#82 DataTables


The DataTables Javascript library creates a powerful display of your application's data. Some of the features include pagination, server side processing, sorting and search.
rails javascript tables view 15:55


Gemfilegem 'rails-assets-jquery', source: 'https://rails-assets.org'
gem 'rails-assets-datatables', source: 'https://rails-assets.org'
gem 'kaminari'
index.html.erb<%= content_tag :table, role: :datatable, data: { url: users_path(format: :json)} do %>
<% end %>
users_controller.rb  def index
    respond_to do |format|
      format.json { render json: UsersDatatable.new(view_context) }
app/datatables/application_datatable.rbclass ApplicationDatatable
  delegate :params, to: :@view
  delegate :link_to, to: :@view

  def initialize(view)
    @view = view

  def as_json(options = {})
      recordsTotal: count,
      recordsFiltered: total_entries,
      data: data


  def page
    params[:start].to_i / per_page + 1

  def per_page
    params[:length].to_i > 0 ? params[:length].to_i : 10

  def sort_column

  def sort_direction
    params[:order]['0'][:dir] == "desc" ? "desc" : "asc"
app/datatables/user_datatable.rbclass UsersDatatable < ApplicationDatatable
  delegate :edit_user_path, to: :@view


  def data
    users.map do |user|
      [].tap do |column|
        column << user.first_name
        column << user.last_name
        column << user.email
        column << user.phone_number

        links = []
        links << link_to('Show', user)
        links << link_to('Edit', edit_user_path(user))
        links << link_to('Destroy', user, method: :delete, data: { confirm: 'Are you sure?' })
        column << links.join(' | ')

  def count

  def total_entries
    # will_paginate
    # users.total_entries

  def users
    @users ||= fetch_users

  def fetch_users
    search_string = []
    columns.each do |term|
      search_string << "#{term} like :search"

    # will_paginate
    # users = User.page(page).per_page(per_page)
    users = User.order("#{sort_column} #{sort_direction}")
    users = users.page(page).per(per_page)
    users = users.where(search_string.join(' or '), search: "%#{params[:search][:value]}%")

  def columns
    %w(first_name last_name email phone_number)
application.js//= require jquery
//= require datatables


$(document).on('turbolinks:load', function(){
      processing: true,
      serverSide: true,
      ajax: $(this).data('url')
application.css *= require datatables
 * For bootstrap support
 * require datatables/dataTables.bootstrap

frank004 said over 2 years ago on DataTables :

can you make a part 2 of this where you add style to the content and links. Thank you

kobaltz PRO said over 2 years ago on DataTables :

You should be able to simply add a class attribute to the link_to methods as you normally would to get the styling.

frank004 said over 2 years ago on DataTables :

I like to keep my markup and style out of the controller and Models.

In this example Im adding 2 Data base Table column to one  View Table with the Project name as the column and the manager as a small span. How can I  recreate this with the json technic.

Example Data:


Project | Date | Actions
Project Name, project manager  | 11/20/2011 | edit, change status action, delete


    <td class="cell_stuff" ><%=link_to project. project, class: "stuff_link"%>

     <span class="stuff"> <%= project.manager.full_name%> </span>


kobaltz PRO said over 2 years ago on DataTables :

I see, keep in mind that the UsersDatatable is its own class and nor really part of the model or controller.

You could extract out the contents of the data method into its own class which I would probably do for larger tables.

As far as the classes on the td tags, that should be possible to do with their API. I'll look into it.

frank004 said over 2 years ago on DataTables :

Perfect. will check that out.

FYI. Check your site permisión Display UI view. I can see the Delete Edit on your comment.

kobaltz PRO said over 2 years ago on DataTables :

Thanks for the heads up. It wouldn't work since I'm doing server side authorization, but definitely shouldn't display.

brandoncordell said over 2 years ago on DataTables :

Would it make sense to memoize the User.count call? I'm not super familiar with memoization, so I'm not sure whether it would benefit this specific situation.

kobaltz PRO said over 2 years ago on DataTables :

Not really since it isn't being used elsewhere in the class. Keep in mind that the memorization is only valid for the lifecycle of the request and any further requests would no longer have the calculations stored. 

bud said over 2 years ago on DataTables :

How do you deal with enums in this setup?  Say I have an integer column and I use enums in it - 0 is "no" and 1 is "yes".  How do you filter for the strings rather than the integers within the table?

kobaltz PRO said over 2 years ago on DataTables :

Great question. It really depends on the complexity to which you've modified the datatables. If you are using server side data and a full text engine, then I would store the 'yes' and 'no' values as part of the indexed data.

If you're using Rails 5.1.x then you could also use a virtual attribute to search on instead of the integer column.

bud said over 2 years ago on DataTables :

Thanks for the quick reply.  I am indeed using Rails 5.1.x.  Do you have an example in the context of your demo in how I could accomplish this with virtual attributes?  Never heard of these and am reading about them now.

bud said over 2 years ago on DataTables :

Thanks!  Very useful.  I understand the concept, but I'm still not sure what the best approach would be to use virtual attributes against an integer column and somehow extract a string from that.  Would I need to define a virtual attribute for each integer that I have mapped as an enum?  In my case I have up to 10 enums in some columns.

bud said over 2 years ago on DataTables :

Just a fyi - I ended up creating my own custom select boxes that handle filtering for my enum columns.

brolycjw said about 2 years ago on DataTables :

Thanks for the great video! It has inspired me to create a gem that will make it possible for other rails developers to include jquery datatables into their project with serverside processing.

For those who are interested, you may find the gem here: https://github.com/brolycjw/datatable

kobaltz PRO said about 2 years ago on DataTables :

Really cool! Another idea for your gem, allow a block with the listing of columns. Kind of like a small DSL for the ordering and selection of columns. 

I've been working on a project which takes the ideas of the Datatables and is basically a full rewrite; allowing pagination, individual column searching, column selection and ordering, saving custom reports and setting defaults, etc. It's a pretty large library so far, but not ready to share with the world. 

brolycjw said about 2 years ago on DataTables :

That's sounds really nice, looking forward to its release!

matissg said almost 2 years ago on DataTables :

I'm wondering how would code change in app/datatables/user_datatable.rb to have search/filter for specific column?
I believe changes should be done somewhere here: users = users.where(search_string.join(' or '), search: "%#{params[:search][:value]}%")
I'd be happy for any hint. Thank you.

Ivan Kuzel said almost 2 years ago on DataTables :

Thank you very mucho. It was very useful. However, I have a question about how to define columns if we have associations.

For instance, my user object has one country, so if I want to see the country name I would do: user.country.name (country is another table).

How should I define the columns method for that? I tried:
def columns
%w(first_name, country.name)
But it's not correct. Thank you very much in advance.

kobaltz PRO said almost 2 years ago on DataTables :

that definitely adds a level of complexity, but is solvable. the problem comes into play when you start searching. you would need a joins and search on the country as well. you could add a hash into the columns like country: :name and modify the search.

marklar PRO said almost 2 years ago on DataTables :

Would you be able to share some sample code for your solution to this?

afonso.pimentel said almost 2 years ago on DataTables :

Hi. I found your post very helpful and I thank you very much for taking time to build such clear and helpful posts.
I have an issue that only started to happen after I modified my datatable to server side processing following the instructions in your video.
What started to happen was this.
I have a webapp with a header with some menu options. One of the options is a link to the users index page.
If I create or update a user, my application redirects to that user show page - let's assume I just created user #10. So after the creation I'm at url /users/10.
This is fine up until this point. When I click on the users index link to see all the users is when the issue happens.
I can see in the logs that the correct controller and method is called - users controller and index method.
The page starts to load, I see the title of the page and the columns headers, but then I get and error - the JSON response is not what it was expected.
In the logs, after the call for the index page, another request was made (same url as the detail of the user with some extra params: ?draw=1....). So it starts a GET to /users/10?draw=1...
I do not know where this call is made. I have no idea what to do and it would be great if you could provide some help about this.
Thanks in advance.
Afonso Pimentel

Hemant Kumar said over 1 year ago on DataTables :

how to add links for show and edit in each row of the table.
i'm getting this error undefined method `admin_client_path' for #ClientsDatatable:0x007fbd3fa7fd38
when i tried to add link this -> links << link_to('Show', admin_client_path(client), method: :get, role: 'button', class: 'btn btn-primary btn-sm blue-button')

wade0727 said 10 months ago on DataTables :

Great video, thank you.

Would you mind giving me an example on how to add the PDF and Excel options to export table data?

wade0727 said 10 months ago on DataTables :

Well, I've managed to get the buttons to show up. I just had to adjust the DOM property with BLfrtip.

      dom: 'Blfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'

Navid Shafie said 8 months ago on DataTables :

Hope someone can help out. I have my code exactly the same. Running ruby '2.3.0' and rail 5.2.2.

When I go to my users.json path I get undefined method '[]' for nil:NilClass on:

def sort_column

and actually everything that uses the params. any help is much appreciated!

[email protected] PRO said 3 months ago on DataTables :

Awesome video Kobaltz! I'm curious, what would be the best approach to enabling search for nested attributes that are part of my column results?

David Ng PRO said about 2 months ago on DataTables :

I experience difficulty in install datatables on Rails 6, it simply does not work, no clue.

Login to Comment