Railsで使えるGem

Railsでajaxなテーブルを使う~datatables

投稿日:

 

 

github.com/rweng/jquery-datatables-rails

Gemfile

bundle

application.js

application.css

view

index.html.erb

tableにidをつけて、theadとtbodyタグをつける

js.coffee

JSON通信

ただし、これはデータを全部datatableに渡している.
ので、データが200件を超えるとだいぶ重くなる.

datatablesにはajaxでデータをやり取りする方法も用意されている.
その場合、部分的に必要な部分だけデータをやり取りするのでたくさんのデータでも大丈夫.

やり方は

railscasts.com/episodes/340-datatables

gemも作られてる

github.com/JoelQ/ajax-datatables-rails

うまく動かなかったので、同じ症状の人のイシューに登録しておいて、jsonを自分で作ってみることにする

まず、準備としてオプションでajax通信とデータソースを指定

次にviewでデータソースはusers.jsonを指定してjsonをgetしに行かせる

あと、tbodyは空でOK

で、普通のroutingなら/users.jsonでindexのjsonを返すんだけど、これが正確なjsonを返せばとりあえずOK

Railscastsの例でためしてみるとjsonはこんな感じだった.

ポイントはaaDataでdatatablesに渡すデータを2次元の配列で準備している.

これをなんとかできればよさそう.

jsonはusers.jsonにアクセスすれば、index.json.erbのテンプレートを使う.

で、こんな感じのテンプレートを作ったらうまくいった(気がする)

arrayで馬鹿っぽいことをやっているのは単にeachで回しただけだと最後の要素にカンマがついてしまって無効なjsonといわれたから

arrayをrawで出してる

*iTotalDisplayRecordsはフィルターされた数を表示するんだけど、@users.countからwill_paginateのtotal_entriesメソッドに変更しました.自分の環境ではどちらも正常だったんだけど、元ソースにあわせました.

Controller

と思ったら、paginationも並び替えも絞込みもうまく動いてなかったorz

いつも同じjsonを吐いてるから、ページネーションとか絞込みとか並び替えの操作に応じて、絞り込んで並び替えたデータを返さないといけない.

 

ログをみるとdatatableが投げてくるパラメータは次のような感じ

このうちRailscastsのソースをみると読んでるパラメータは次のような感じだった

  • sSearch 検索語
  • iDisplayStart 表示するデータの最初の番号(ページネーション用)
  • iDisplayLength 表示するデータの数
  • iSortCol_0 ソートするカラムの番号 左から数え始めて0から始まる
  • iSortDir ソートの方向 descかasc

で、コントローラーでとりあえず抽出してみた

ページネーション

まずは、ページネーションから

kaminariじゃないのは、will_paginateなら一回の表示データ数を動的に変えられるので

(*あとでkaminariでも余裕でできるって気づきました)

で、コントローラーに

ソート

次は、ソート

コントローラーに

絞込み

最後に検索絞り込み

まとめ

これで全部動いているはず

最後に、全部まとめたものをコピペしておきます

そろそろgemづくりを覚えないとだめだな.

ほかのアプリに流用するときのメモ

  • columnはテーブルに表示したいカラムの要素を配列で与える
  • テンプレート(json.erb)にも表示したいカラムの要素を配列で与える
  • あと、whereの検索対象にしたいカラムを設定する

配色~scss

ラベンダーとか勘弁してください.って時にはscssで上書きできるよう

-Railsで使えるGem
-, ,

執筆者:

関連記事

RubyでFaye-websocketを試す

By: Jenny Ondioline – CC BY 2.0 目次1 公式2 インストール3 サーバ側4 クライアント側5 エラー 公式 faye-websocketは、fayeからwe …

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

Rails4.2でselectを絞込できるselect2を使ってみた〜select2

By: Metropolitan Transportation Authority of the State of New York – CC BY 2.0 目次1 select22 Ge …

RubyでTwitter〜twitter & t

By: Pete Simon – CC BY 2.0 目次1 はじめに2 twitter.gemのインストール3 Twitterアプリへの登録4 サンプルから試してみる5 cliでTwit …

no image

Rubyでxmlの要素の追加など~nokogiri

目次1 はじめに2 文字列をパースしてxmlとして読み込んでそのままxmlとして出力する3 nodeの追加4 nodesetの作成と追加5 DocumentFragmentの作成と追加 はじめに 参考 …