# Gemfile
gem '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.rb
class 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.rb
class 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
*