#82 DataTables

Summary

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

Summary

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 %>
  <thead>...</thead>
  <tbody></tbody>
<% end %>
users_controller.rb  def index
    respond_to do |format|
      format.html
      format.json { render json: UsersDatatable.new(view_context) }
    end
  end
app/datatables/application_datatable.rbclass ApplicationDatatable
  delegate :params, to: :@view
  delegate :link_to, to: :@view

  def initialize(view)
    @view = view
  end

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


private

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

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

  def sort_column
    columns[params[:order]['0'][:column].to_i]
  end

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

  private

  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(' | ')
      end
    end
  end

  def count
    User.count
  end

  def total_entries
    users.total_count
    # will_paginate
    # users.total_entries
  end

  def users
    @users ||= fetch_users
  end

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

    # 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]}%")
  end

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

...

$(document).on('turbolinks:load', function(){
  $("table[role='datatable']").each(function(){
    $(this).DataTable({
      processing: true,
      serverSide: true,
      ajax: $(this).data('url')
    });
  });  
})
application.css *= require datatables
 *
 * For bootstrap support
 * require datatables/dataTables.bootstrap
 * 


frank004 said over 1 year ago:

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

kobaltz PRO said over 1 year 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 over 1 year 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:

Table

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

<tr>

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

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

</td>


kobaltz PRO said over 1 year 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 over 1 year 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 over 1 year ago:

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

brandoncordell said over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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 over 1 year ago:

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

brolycjw said 10 months 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 10 months 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 10 months ago:

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

matissg said 9 months ago:

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

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)
end
But it's not correct. Thank you very much in advance.

kobaltz PRO said 9 months ago:

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

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

afonso.pimentel said 8 months ago:

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.
Regards,
Afonso Pimentel

Hemant Kumar said 4 months ago:

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')

Login to Comment