Datatables rails

1 Giới thiệu

DataTables là một plug-in cho thư viện jQuery. Đây là một công cụ tuyệt vời, nhất là đối với các trang quản lý hơn nữa việc cài đặt và sử dụng lại rất đơn giản. Datatables có những ưu điểm nổi bật như phân trang, tìm kiếm sắp xếp một cách nhanh chóng dựa trên ưu điểm của ajax và có thể tùy biến dễ dàng.

Để sử dụng datatables trong rails bạn cần sử dụng 2 gói phần mềm (gem) là jquery-datatables-rails và ajax-datatables-rails bên cạnh đó bạn có thể dùng thêm gem kaminari để hỗ trợ cho việc phân trang tốt hơn.

1.1 jquery-datatables-rails

Gem này thực chất là Jquery DataTables plugin. Gem này có nhiệm vụ bên phía client gửi ajax request lên server, sau khi nhận được dữ liệu trả về thì hiển thị dữ liệu trên trang. Việc cài đặt gem này cũng khá đơn giản bạn có thể thực hiện theo các bước sau: Thêm gem 'jquery-datatables-rails' vào trong Gemfile và chạy bundle install

gem 'jquery-datatables-rails'

bundle install

Chạy rails generate jquery:datatables:install để thêm //= require dataTables/jquery.dataTables vào trong application.js và *= require dataTables/jquery.dataTables trong application.css tuy nhiên bạn có thể làm việc này thủ công cũng không sao cả.

application.js

//= require dataTables/jquery.dataTables

application.css

*= require dataTables/jquery.dataTables

Như vậy bạn đã hoàn thành việc cài đặt gem 'jquery-datatables-rails'. Tiếp theo cần cài đặt gem 'ajax-datatables-rails'.

1.2 ajax-datatables-rails

Gem này được viết dành cho rails nhằm hỗ trợ cho việc xử lý các ajax request của Jquery Datatables và trả về dữ liệu đúng theo chuẩn của Jquery Datatables.

Để sử dụng Gem này bạn cần thêm gem 'ajax-datatables-rails' vào trong Gemfile và chạy bundle install để cập nhật các gói thư viện cho Rails

gem 'ajax-datatables-rails'

bundle install

1.3 kaminari

Để hỗ trợ cho việc phân trang bạn nên dùng kaminari bên cạnh đó Datatbles cũng support cho một số gem dùng cho việc phân trang khác như will_paginate. Để sử dụng kaminari rất đơn giản bạn chỉ cần thêm gem 'kaminari' vào trong Gemfile và chạy bundle install là được.

gem 'kaminari'

bundle install

Như vậy việc cài đặt các gói thư viện (gem) cần thiết cho Datatables đã xong. Tiếp theo tôi sẽ hướng dẫn tạo một ứng dụng đơn giản với Datatbles trong rails.

2 Tạo ứng dụng đơn giản sử dụng Datatables với Rails

Đầu tiên bạn cần tạo Model User bao gồm các trường dữ liệu name, phone, address. Sau đó, bạn tạo các trang show, index, create, update cho model này như bình thường việc cài đặt các chức năng này cũng khá đơn giản bạn có thể tham khảo thêm trong example code. Sau đó bắt đầu việc sử dụng Datatables cho trang index.

Đầu tiên bạn cần tạo api để trả về dữ liệu cho ajax query của Datatables JQuery. Bạn có thể làm theo các bước sau. Gõ lệnh rails generate datatable User để tạo ra file user_datatable.rb trong thư mục app/datatables. Sau đó bạn mở file này ra và sửa lại với nội dung sau.

class UserDatatable < AjaxDatatablesRails::Base
  include AjaxDatatablesRails::Extensions::Kaminari

  def sortable_columns
    @sortable_columns ||= ['User.name', 'User.phone', 'User.address']
  end

  def searchable_columns
    @searchable_columns ||= ['User.name', 'User.phone', 'User.address']
  end

  private

  def data
    records.map do |record|
      [
        record.name,
        record.phone,
        record.address
      ]
    end
  end

  def get_raw_records
    User.all
  end
end

Trong class này bạn cần chú ý một số điểm sau. Thêm include AjaxDatatablesRails::Extensions::Kaminari để dùng cho việc phân trang.

Method sortable_columns sẽ trả về một dãy các thuộc tính được phép sắp xếp. Giá trị trong dãy này sẽ có dạng Tên model.attribute ví dụ User.name

Method searchable_columns sẽ trả về một dãy các thuộc tính được phép tìm kiếm. Giá trị trong dãy này sẽ có dạng Tên model.attribute ví dụ User.name. Kết quả sẽ tìm kiếm theo tất cả các attribute này.

Method get_raw_records để trả về dữ liệu ban đầu chưa sắp xếp hay tìm kiếm.

Method data là dữ liệu sẽ trả về. Dữ liệu sẽ là một Array, mặc định mỗi phần tử trong Array này sẽ là một Array tương ứng với các cột trong bảng kết quả. Tuy nhiên bạn có thể trả về dưới dạng Hash tôi sẽ hướng dẫn ở phía dưới.

Tiếp theo đó bạn cần sửa lại method index trong users_controllers.rb để thêm phần xử lý cho ajax request cho trang index.

app/controllers/users_controller.rb

def index
    respond_to do |format|
      format.html
      format.json { render json: UserDatatable.new(view_context) }
    end
  end

Như vậy bạn đã tạo sao phần api cho ajax request. Bạn có thể kiểm tra kết quả tại http://yourhost:port/users.json. Tiếp sẽ là phần cài đặt bên phía client.

Đầu tiên cần chú ý Datatbles JQuery sử dụng bảng để hiển thị dữ liệu, và trong thẻ table cần có id để Datatables JQuery có thể chọn chính xác bảng này để dùng. Thêm vào đó bạn cũng nên chỉ rõ url để ajax lấy dữ liệu cho bảng này.

app/views/users/index.html.erb

<table id="users-table", data-source="<%= users_path(format: :json) %>">
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<%= link_to 'New', new_user_path %>

Sau đó cần tạo một thêm file script cho Datatables JQuery chọn được table và url đến nơi lấy dữ liệu cho bảng (ở đây tôi dùng coffeescript bạn có dùng http://js2coffee.thomaskalka.de/ để chuyển sang javascript). Khi trang index được render ra thì Datatables JQuery sẽ gọi đến url là $('#users-table').data('source') để lấy dữ liệu và hiển thị ra bảng.

$ ->
  $('#users-table').dataTable
    processing: true
    serverSide: true
    ajax: $('#users-table').data('source')
    pagingType: 'full_numbers'

Như vậy đã hoàn thành việc cài đặt và sử dụng Datatables cho rails.

Bạn có thể tham khảo code chi tiết tại github code

3. Datatables advance

3.1 Turbolinks

Khi dùng datatbles bạn không nên sử dụng turbolinks, nếu sử dụng turbo links trong nhiều trường hợp khi quay lại trang có sử dụng Datatables thì dữ liệu trang này sẽ không tự động cập nhật (không có dữ liệu). Để xóa turbolinks bạn cần xóa gem turbolinks trong Gemfile và xóa //= require turbolinks trong application.js` chi tiết bạn có thể tham khảo tại remove turbolinks

3.2 Chuyển dữ liệu trang về từ dãy các Array sang dãy các Hash

Trong nhiều trường hợp dữ liệu trả về khá nhiều việc trả về Array sẽ gây khó hiểu và dễ nhầm lẫn thay vào đó việc dùng kiểu Hash rất tiện lợi và dễ bảo trì sau này. example code

3.3 delegators

Để sử dụng các method trong view bạn cần thêm def_delegators :@view tiếp sau đó là các method bạn muốn dùng. Ví dụ

def_delegators :@view, :link_to, :user_path, :edit_user_path

Chi tiết bạn có thể tham khảo tại example code

3.4 Thêm class cho cột trong bảng

Trong nhiều trường hợp bạn muốn thêm các class cho các ô thuộc cột nào đấy trong bảng kết quả bạn có thể dùng settings aoColumnDefs của Datatables. Ví dụ

  ...
  aoColumnDefs: [
    {sClass: "align-center", aTargets: [3, 4]}
  ]
  ...

Chi tiết tham khảo tại example code

3.5 Thay đổi ngôn ngữ

Mặc định Datatables dùng ngôn ngữ tiếng anh, để chuyển sang ngôn ngữ khác bạn có thể dùng settings language của Datatables. Ví dụ

language:
  search: "Tìm kiếm:"

3.5 Tìm kiếm và sắp xếp

Theo mặc định thì các cột được hiển thị ra đều có thể tìm kiếm và sắp xếp, tất nhiên bạn cũng phải thay đổi method sortable_columns và searchable_columns cho phù hợp. Để tắt chức năng tìm kiếm sắp sếp cho cột bạn có thể làm như sau:

{data: "edit", bSortable: false, bSearchable: false},
{data: "destroy", bSortable: false, bSearchable: false}

Chi tiết tham khảo tại example code

3.6 Thêm dữ liệu vào trong request params

Trong nhiều trường hợp ta cần thêm các dữ liệu vào trong params của ajax cho nhưng yêu cầu phức tạp. để thêm dữ liệu bạn sử dụng settings data trong ajax như sau:

 ...
 ajax:
   url: $("#users-table").data("source")
   data: (d) ->
     d.test_data = "test_data"
     return
 ...

Chi tiết tham khảo tại example code

Trên đây là một số tính năng thường sử dụng của Datatables. Để hiểu chi tiết về Datatables bạn có thể tham khảo tại

1. https://www.datatables.net/
2. https://github.com/antillas21/ajax-datatables-rails
3. https://github.com/rweng/jquery-datatables-rails
4. demo github

Cảm ơn đã theo dõi bài viết!