Railsで使えるGem

Railsのテーブル並び替えを実装する

投稿日:

 

 

環境 RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails

参考 #147 Sortable Lists (revised) @Railscasts

 

並び替えは次のメソッドで実行する

昇順がasc、降順がdesc

やること

  • テーブルのカラム名をクリックすると上矢印が現れて昇順に並び替える
  • もう一度同じカラム名をクリックすると下矢印に変わって降順に並び替える
  • 違うカラム名をクリックすると上矢印が現れて昇順に並び替える、前の矢印は消える

仕組み

  1. リンクを作成して:sortにカラム名を投げてindexを呼びなおす
  2. その際、もし前と同じカラム名なら方向をトグルする(ascならdesc、descならasc)
  3. もし前と違うカラム名なら方向はascにする
  4. モデル名.order(カラム名+’ ‘+昇順・降順)で指定した順序でデータを呼び出す
  5. カラム名がついているテーブルヘッドの値の後ろに昇順なら上矢印・降順なら下矢印をつける

コーディング

View

<th>のうちソートをしたいタイトルにリンクを作成して:sortにカラム名を投げてindexを呼びなおす

model_class.human_attribute_name はtwitter-bootstrap-railsがgenerateしたもの 普通に:nameでもOK

ソートさせたいカラムの分だけ作成する

Controller

View

ブートストラップで上矢印アイコンは次のとおり

選択されたカラム名(@sort)の後ろに、指定された方向(@direction)にしたがって矢印アイコンを出す

 

テスト作成とHelper化のリファクタリングは後日

-Railsで使えるGem
-,

執筆者:

関連記事

Rails3.2でリアルタイムメッセージング~Private_pub、Faye

  Railsで簡単に非同期通信ができるPrivate_pubというgemを試した もともとrubyにはFayeという非同期通信ができるgemがあったが、簡単に安全な接続ができる実装を加えた …

no image

Private_pubでのJSON通信の方法

  前回 Rails3.2でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)   Gemfileへの追加とbundleの実行 privat …

今度こそRails3.2からdocxを生成する

  前提 Rubyからdocxを生成する 前回、イキオイアマって自分でdocxを生成する簡単なライブラリを作ってしまった.(なんて車輪の再発明 今回はこれをRailsから利用してみる. 目次 …

RailsにTwitter Bootstrapのフォームを設定する~simple_form

環境 RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails github.com/plataformatec/simple_form 目次1 Gem …

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

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