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

執筆者:

関連記事

RailsでECサイト構築7 デプロイ~spree+apache2+passenger

  前提 Rails3.2のアプリをデプロイ~apache+passenger+postgresql Rails3.2+Apache2+Passenger環境でSSLを使ってみる &nbsp …

no image

Ubuntu Server 12.04で動画のサムネイルを作成~avconv ffmpeg

  目次1 インストール2 動画の情報3 使えるフォーマットの一覧4 サムネイル画像の作成 インストール

総合的な動画の変換 …

no image

Railsで使える便利なナビゲーション~simple-navigation

Rails4とD3.jsでローソク足グラフを描く〜d3.js編

前回 Rails4とD3.jsでローソク足グラフを描く〜Rails準備編 目次1 jsonデータ2 y_scaleを考える3 始値と終値から箱をつくる4 高値と安値でひげをつくる5 y_axisをつけ …

Rails4.0でもajaxなデータテーブルを使う~ajax-datatables

Railsでajaxなテーブルを使う~datatables Rails4でのJSONテンプレート~jbuilder+rabl+ruby 目次1 index.json.jbuilder2 tasks.j …