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
-, ,

執筆者:

関連記事

no image

Rails3.2でリアルタイムメッセージングサービスをherokuにデプロイしたよ〜private_pub,Faye

参考 Rails3.2でリアルタイムメッセージング~Private_pub、Faye さっそくherokuにあげてみた ブラウザを2つ起動して並べてみれば投稿した内容が即時にほかのブラウザに反映するの …

no image

Mongoidのandとorで悩み中

and

or

  orの方はハッシュで[crayon-58 …

no image

Rails3.2でOpenDocumentText(.odt)を作成~serenity

  これも途中経過デス   odtはOpenOffice.orgのwriterなんかの保存形式 serenityはerbライクなodtテンプレートから変数を利用して文書を作成してく …

ElasticSearchをRubyから使う~elasticsearch-ruby

By: Harry Rose – CC BY 2.0 目次1 gem elasticsearch-ruby2 環境3 インスタンス作成4 メソッド一覧5 情報取得6 ドキュメントの作成7 …

Rails3.2とBackbone.jsでサーバーサイドのソーティング

By: Haldane Martin – CC BY 2.0   Rails3.2とBackbone.jsでサーバーサイドのフィルタリング 次はソートを実装したい 目次1 サーバ …