Tag: kaminari

目次

参考情報

インストール

  • Gemfileに追加
    gem 'kaminari'
  • bundle実行
    bundle install --path vendor/bundle

使用方法

  • controllerの修正
      def index
    #    @softwares = Software.all
        @softwares = Software.page(params[:page])
      end
    
  • index.html.erbの修正。以下を追加する。
    <%= paginate @softwares %>
    

twitter-bootstrap-railsと併用する場合(Bootstrap3 + Rails4)

※Bootstrap2でもうまくいく感じ。

generatorで生成

  • 以下のコマンドを実行する。特にいじらなくてもうまくいく?
    $ bundle exec rails g kaminari:views bootstrap
          downloading app/views/kaminari/_first_page.html.erb from kaminari_themes...
          create  app/views/kaminari/_first_page.html.erb
          downloading app/views/kaminari/_gap.html.erb from kaminari_themes...
          create  app/views/kaminari/_gap.html.erb
          downloading app/views/kaminari/_last_page.html.erb from kaminari_themes...
          create  app/views/kaminari/_last_page.html.erb
          downloading app/views/kaminari/_next_page.html.erb from kaminari_themes...
          create  app/views/kaminari/_next_page.html.erb
          downloading app/views/kaminari/_page.html.erb from kaminari_themes...
          create  app/views/kaminari/_page.html.erb
          downloading app/views/kaminari/_paginator.html.erb from kaminari_themes...
          create  app/views/kaminari/_paginator.html.erb
          downloading app/views/kaminari/_prev_page.htm
    
  • bootstrap3の場合はこれ?
     bundle exec rails g kaminari:views bootstrap3
  • 文字を日本語化。config/locales/ja.ymlを修正
    ja:
      views:
        pagination:
          first: "&laquo; 最初"
          last: "最後&raquo;"
          previous: "&lsaquo; 前"
          next: "次 &rsaquo;"
          truncate: "..."
    
  • application.rbでlocaleを変更。
    config.i18n.default_locale = :ja

twitter-bootstrap-railsと併用する場合(古い内容)

  • twitter-bootstrap-railsと併用するとレイアウトが崩れる。
  • 対策としてgabetax/twitter-bootstrap-kaminari-views · GitHubをcloneする。
  • app/views/kaminari/*.erbを自分のところのapp/views/kaminari以下にコピーする(ディレクトリがない場合は作る)。

配列に対してページング


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-04-13 (水) 16:46:27