DataTables を使うまでメモ

前提

• Rails に DataTables を導入
  • 手軽に導入するため CDN を使う

導入

対象画面の View ファイルで DataTables を読み込む

app/views/test.html.haml

= stylesheet_link_tag 'https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css'
= javascript_include_tag 'https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js'

...

%table.table.table-bordered#datatables-use-id
  %thead
    %tr

...

application.js で全 JS ファイルを読み込んでいる（//= require_tree .）ので、対象画面でのみ DataTable を使うように設定する（そのままだと全 View で DataTable を使おうとして、読み込んでないのでエラーになる）
対象 View に対応する JS ファイルを用意する

app/assets/javascripts/test.js

$(function () {
  var datatables_use_id = '#datatables-use-id'

  if ($(datatables_use_id).length > 0) {
    $(datatables_use_id).DataTable();
  }
});

設定

デフォルトでも十分使えるが、設定も色々と行える

• 手軽に設定を変更したい
  • https://agohack.com/datatables-options/
• 拡張やプラグイン使うと色々できそう
  • https://datatables.net/extensions/index
  • https://datatables.net/plug-ins/index
• 個人的には、検索フォームの設定が便利
  • https://datatables.net/examples/api/regex.html
    • 検索対象が、デフォルトだとテーブル全体だけど、カラム単位にできる
    • また、検索値に正規表現を使える