Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
lib
test
vendor/assets
.gitignore
.rubocop.yml
.ruby-version
CODE_OF_CONDUCT.md
Gemfile
Gemfile.lock
MIT-LICENSE
README.md
Rakefile
datatable.gemspec

README.md

Datatable

This is a ruby/rails wrapper around a popular jquery library Datatables.js. It allows you to use the jquery Datatables library server-side without writing a single line of javascript code. All datatables configuration is done through a simple DSL by including the Datatable module into your class.

Current supported features:

  • Server-side sorting
  • Server-side filtering
  • Draper decorator

Heavily inspired by bogdan/datagrid.

Usage

add to gemfile

# Gemfile
$ gem 'datatable', github: 'brolycjw/datatable'

add to asset pipeline

# app/assets/javascripts/application.js
//= require jquery
...
//= require datatable
# or for bootstrap 4
//= require datatable-bs4

create a datatable:

# app/datatables/users_datatable.rb

class UsersDatatable
  include Datatable

  scope do
    User.includes(:group).references(:group)
  end
  
  # optional: decorates the collection with draper
  decorate
  
  # filter by name and created_at between start_date and end_date
  filter :name, start_date, end_date do |scope, name, start_date, end_date|
    scope.where('name LIKE ?', "%#{name}%").where(created_at: start_date..end_date)
  end

  column(:name)
  # with custom order and search
  column(:group, order: 'groups.name', search: 'groups.name') do |user|
    user.name
  end
  # with custom header
  column(:active, header: "Activated") do |user|
    !user.disabled
  end
  
  # default column to order by
  order_by :name, :desc

end

add json response to controller:

# app/controllers/users_controller.rb

class UsersController
  # GET /users
  # GET /users.json
  def index
    respond_to do |format|
      format.html
      format.json { render json: UsersDatatable.new(view_context) }
    end
  end
  ...
end

render datatable with datatable view helper:

<%# app/views/users/index.html.erb %>

<%= datatable_for(UsersDatatable) %>

<%# or with custom url %>
<%= datatable_for(UsersDatatable, url: users_path(format: :json)) %>

Scope

Default scope of objects to filter and display.

scope do
  User.includes(:group)
end

Filter

Additional filtering functionality for filtering beyond the basic fuzzy search

filter(:name) do |scope, name|
  scope.where('name LIKE ?', "%#{name}%")
end

filter(:start_date, :end_date) do |scope, start_date, end_date|
  scope.where(date: start_date..end_date)
end
<%# app/views/users/index.html.erb %>

<%= form_tag(users_path, method: :get) do |f| %>
  <%= f.text_field :name %>
  <%= f.date_field :start_date %>
  <%= f.date_field :end_date %>
  <%= f.submit %>
<% end %>

<%= datatable_for(UsersDatatable) %>

Installation

Add this line to your application's Gemfile:

gem 'datatable'

And then execute:

$ bundle

Or install it yourself as:

$ gem install datatable

Client-side Datatable customization

You may customize the datatable's client-side features by modifying the included datatable.js.

Example for Buttons extension:

# app/assets/javascripts/datatable.js

$(function () {
  $('#datatable').each(function () {
    var datatable = $(this).DataTable({
      lengthChange: false,
      responsive: true,
      processing: true,
      serverSide: true,
      ajax: { url: $(this).data('url') }
    })
    new $.fn.dataTable.Buttons(datatable, {
      buttons: ['colvis', 'excel', 'pdf']
    });
    datatable.buttons().container().appendTo('#datatable_wrapper .col-md-6:eq(0)')
  })
})

Contributing

Pull requests are very welcome! Please include tests for every patch, and create a topic branch for every separate change you make.

Report issues or feature requests to GitHub Issues.

To run tests

cd test/dummy
yarn install or npm install
bin/rails db:migrate:reset

License

The gem is available as open source under the terms of the MIT License.