jQueryプラグインのDataTablesがよさげ

ちょっとギョーミーな感じのテーブル(HTMLの)を使っていて、それをソートするのにいいjQueryのプラグインないかなー?と思ってググったところ、ありました。DataTablesプラグイン。かなり多機能で、自分は使ってないけれど、ページングをAjaxでの切り替えなどもできるっぽい。

jQuery Plugin: DataTables

また、Twitter Bootstrapでも使えるようなTipsも本家の記事で紹介されている。

DataTablesをTwitterBootstrapで使うには(英語)

Railsで使う場合は、上記のページにあるDT_bootstrap.jsとDT_bootstrap.cssをダウンロードして、assetsの各フォルダに突っ込んでおくとよい。
DT_bootstrap.cssで、画像のurl指定をしているところを、/assets/sort_both.pngみたいに/assets/なんちゃらに書き換えておく必要がある。
画像はもちろんapp/assets/imagesディレクトリ以下にコピーしておくこと。

至れり尽くせりな感じがするDataTablesなのだが、しかし、こいつはちょっとわかりにくい。
初期化パラメータがsなんちゃらやaなんちゃらみたいになっていて、ちょっとわかりにくいなーと思っていたら、日本語でwikiにまとめられてた。
非常にありがたい。

JavaScript/jQuery/DataTables

また、日本語化に関する記事があった。

多機能テーブルDataTablesを使う

これに従って、似たような感じにしてみた。(ただしソースはcoffeescript)

$ ->
  $("table#example").dataTable({
    "oLanguage": {
      "sLengthMenu" : "表示件数 _MENU_ 件"
      "oPaginate"   : {
        "sNext"     : "次へ"
        "sPrevious" : "前へ"
      }
      "sInfo" : "全_TOTAL_件中 _START_〜_END_件を表示"
      "sSearch" : "検索:"
      "sZeroRecords" : "データが見つかりません"
      "sInfoEmpty" : "データが見つかりません"
      "sInfoFiltered" : "(全_MAX_件より、フィルタリング)"
      "sProcessing" : "しばらくお待ちください…"
    }
    "bPaginate" : true # ページングを表示
    "bProcessing" : true # 処理が長いときに処理中の表示をする
    "aoColumns" : [ # 列毎に設定を行うときに使用
      {"bSortable" : false} # 対象の列をソートできないようにする
      null # デフォルトの設定から変更しない場合はnullを指定
      null
      null
      null
      null
      null
      null
      {"bSortable" : false}
    ]
  })

ページングもかなりいい感じだし、フィルタリングも速いです。
普通の使い方だと、jQuery UIのテーブル風のデザインにするための設定もあったので、いちいち自分で小綺麗な感じにしなくてもよいのが嬉しいところです。
Ajaxでページングするとかスクロールでの自動ロードとかを使うなど、完全に使いこなすにはJavascriptがわからないとダメっぽいですが、普通にソート、フィルタするだけだったら詳しくなくてもできるんじゃないかなと思います。


タグ Ajax, JavaScript, jQuery, Ruby on Rails | パーマリンク.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です