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とBackbone.jsでサーバーサイドのソーティング

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

RailsでECサイト構築2 注文してみる~spree

  前提 RailsでECサイト構築~spree さっきは日本に発送できなかったので、最小限の設定をして注文から入金・発送までの一連の流れをみてみる 目次1 設定2 注文してみる3 入金・発 …

Rubyでウェブサイトを操作してリストをつくる〜mechanize

    By: JoshSemans   以前からRailscastsというRuby on Railsの動画サイトが好きでよく見ているのだが、380近く動画があって気にな …

RailsでこんにちはBackbone.Marionette

By: palindrome6996 – CC BY 2.0 自分の中でmarionette熱がだんだんと高まりつつあり、特徴的なItemView、CollectionView、Compo …

Railsでチェックボックスで複数選択するとき〜check_box_tag

By: Luca Masters – CC BY 2.0 目次1 問題2 アンサー3 情報 問題 チェックボックスで複数選択可のフォームでうまくparamsにはいらない 例1 [crayo …