欢迎来到cool的博客
7

Music box

Click to Start

点击头像播放音乐
新博客链接

增加分页组件的样式,bootstrap_pagination ,并增加列表的统计。

 

1.首先得增加 

gem 'kaminari'

2.做好分页的功能之后,在view/layouts/_pagination.html.erb中添加一下代码。需要新建一个_pagination.html.erb文件。

<%= paginate records, left: 1, right: 3, theme: 'bootstrap' if records.any? rescue "" %>

<div class="summary">共有 <strong class="text-info"><%= records.total_count rescue 0 %></strong> 个查询结果</div>

3.在 app/helpers/application.rb中添加。

  def pagination(records)
    render '/layouts/pagination', records: records
  end 

4.在view中 添加一个 kaminari的文件夹。添加分页的内容样式:

https://coding.net/u/sweetysoft/p/topgroup_web/git/tree/master/app/views/kaminari/bootstrap

5.在app/assets/stylesheets/application.css中的:

.table-actions-bottom .pager, .pagination, .summary { float: right; line-height: 30px; margin: 20px 10px; }
.table-actions-bottom .pager { margin-top: 0; margin-bottom: 0; }

6.最后在index中添加:

  <tfoot>

      <tr>

          <td colspan="8">         

            <%= pagination @articles %>     

          </td>

      </tr>

  </tfoot>

样式就出来了。

 

Bootstrap4 Kaminari Views

Quick Bootstrap 4 styling (tested for bootstrap 4.0.0) for Kaminari

Installation

Include to your Gemfile

gem 'kaminari'
gem 'bootstrap4-kaminari-views'

And run in console

bundle install

Usage

Render Pagination with a theme

= paginate @users, theme: 'twitter-bootstrap-4'

Render with specific pagination & nav classes

= paginate @users, theme: 'twitter-bootstrap-4',
                   pagination_class: "pagination-sm",
                   nav_class: "d-inline-b"

 

返回列表