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

執筆者:

関連記事

Rails3.2でJasmineをつかってCoffeeScriptをテスト~jasminerice

    #261 Testing JavaScript with Jasmine (revised)   addyosmani.github.com/backbone-f

Ubuntu ServerのGuardからGrowl for Windowsにネットワーク経由で通知する

github.com/guard/guard 普段はWindows7から仮想環境(VirtualBox)のUbuntu Server 12.04.1へputtyで接続して開発してます. Virtual …

Rails4.1に対応したRefinery CMS 3.0を試してみた

By: Alexis Madrigal – CC BY 2.0 目次1 Refinery CMS2 Gemfile3 generate4 configファイル5 起動6 管理画面7 トラブ …

no image

Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails

  公式 backbonejs.org/ Backbone ドキュメント日本語訳 github.com/enja-oss/Backbone イントロダクション github.com/enja

Deviseのユーザーと既存のMongoidモデルを関連づける

前提 Rails3.2でHTML5で取得した位置情報をMongoDBに保存してGoogleMapsでみる~mongoid、gmaps4rails Rails3.2+Mongoidでログイン機能~dev …