#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 8 months ago:

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

kobaltz PRO said 8 months ago:

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 8 months ago:

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 8 months ago:

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 8 months ago:

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 8 months ago:

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

brandoncordell said 8 months ago:

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 8 months ago:

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 6 months ago:

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 6 months ago:

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 6 months ago:

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 6 months ago:

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 5 months ago:

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

brolycjw said 4 days ago:

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 4 days ago:

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 4 days ago:

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

Login to Comment