RailsでTwitterBootstrap Railsで使えるGem

Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminari

投稿日:

github.com/amatsuda/kaminari

Gemfile & bundle

次のスクリプトが追加される

 

設置

kaminari_config.rb

設定しなくてもよいのだが確認のためconfigファイルを出す

デフォルトはこのような感じ

controllerの設定

viewの設定

テーマの作成

デフォルトテーマの準備

kaminariのbootstrap用テーマは既にあるけど、勉強をかねて自作

rails g kaminari:theme でいろいろわかるらしいけど今は404エラー

*いまは

でbootstrapテーマがいけます

ただし、このテーマはclassにdisableをつけるのではなくて、クリックできないリンクは表示しない仕様です

 

テーマの作成

app/views/kaminari/にできたデフォルトテーマを修正すればOK

やること

  • デフォルトテーマの構造はnav>span。これをブートストラップの構造div.pagination>li>aに直す
  • _page.htmlはlink_to_unlessを使っているが、このままだと現在ページにaタグがつかずにブートストラップのcssが適用されないので、現在ページにもダミーのaタグをつけて、liに.activeクラスをつける
  • デザイン的には「First」「Prev」は表示しないではなく.disableクラスをつけたほうがいいと思う

これでOKなはず

-RailsでTwitterBootstrap, Railsで使えるGem
-,

執筆者:

関連記事

Rubyでデータクリーニング~mechanize & active_support

  オライリー・ジャパンから「d3をはじめよう」という本が発売されたので読んだ 棒グラフ、折れ線グラフ、インタラクション(マウスオーバーで丸が大きくなるとかラベル表示とか、横のリストからグラ …

no image

Rails3.2でユーザー管理機能を追加2~Devise+AjaxDataTables

  前回 Rails3.2でユーザー管理機能を追加~Devise 参照 Railsでajaxなテーブルを使う~datatables   いままでAjaxでのデータ更新ができなかった …

多対多の関係でまだ関連を持っていない候補を探す〜active_record、pluck、not in

By: Kevin Dooley – CC BY 2.0 目次1 前提2 やりたいこと3 解4 解説 前提 PersonとProjectは、ProjectsPersonという中間モデル(テ …

Rails5でコントローラーの記述を省略~inherited_resources

By: Simon Matzinger – CC BY 2.0 目次1 inherited_resources2 Gemfile3 使い方 inherited_resources inhe …

Ubuntu Server 12.04.1にいま流行のDiscourseをインストールしてみた

By: Wonderlane – CC BY 2.0 目次1 はじめに2 環境3 インストール4 情報 はじめに すでにGitHubのトレンドRepoでスター数がTwitterのFligh …