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でdocxをフォーマット指定でダウンロードできるようにする

タイトルだけだと何のことだかわからない railsでdocuments/2とかをGETメソッドで呼び出すとdocumentsコントローラーのshowメソッドを呼び出すようになってるんだけど、docum …

Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder

    HTML5ではブラウザからユーザーのPCの位置情報を取得することができるGeoLocation APIというものがある (もちろんデフォルトではユーザーに確認をする設定にな …

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

By: Manuel Calavera – CC BY 2.0 前回 Rails4で複雑な検索〜Ransack こちらのサンプルを使用させてもらいました。 datawarehouse.we …

no image

RubyとRailsのテスト関係のリンクメモ

  目次1 RSpec2 Factory Girl3 Capybara RSpec rspec.info/ Expectations とMatcher rubydoc.info/gems/r

SASS/SCSS+COMPASS+zurui-sass-railsで角丸・グラデ・半透明・テキストシャドウ・ボックスシャドウ

By: Ole Houen – CC BY 2.0 sass-lang.com/ Sassの基礎 (全15回) ドットインストール ネストを覚えた人のためのSassの便利な使い方 comp …