Rails 中添加翻页功能

背景

去年在公司用rails写了个静态页面，用于监控自动化FTP服务器的磁盘使用量情况，当数据超过设定值后自动发送邮件报警。页面中有一个Form，用于添加监控项。刚开始监控的目录就七八项，页面看起来还好，但现在增加到了近20项，整个页面看起来就有点臃肿，所以打算抽空写个翻页按钮，将页面篇幅限制一下。

一、工具选择

虽然翻页功能可以自己用js实现，但是考虑到自己还是个js小白，果断放弃，转而求助于第三方库....逃~😂
经过一番度娘后不禁使我感叹：Rails的插件是真他娘的少啊😡！
不过好在还是有一款比较简单易用的开源插件:will_paginate。 该插件使用起来相当便捷，仅仅几行代码就能搞定翻页功能。除此以外，它还有个bootstrap版本。如果页面使用了bootstrap框架，就选择will_paginate-bootstrap吧！
由于本人项目中使用了到bootstrap，所以采用后者。

二、安装will_paginate：

1. 在rails项目的Gemfile中添加 gem 'will_paginate-bootstrap'
2. 再使用bundle install命令安装
3. 重启rails server即可

三、will_paginate的使用

前面提到过，will_paginate的使用特别简单，只需在controller和view中各增加一行代码即可。
以我的index页面为例：
1. 对controller中的index方法中的实例方法进行下修改：

def index
    #将原始的
    @users = User.all
    #修改为
    @users = User.paginate(page: params[:page], :per_page => 5)
end

该实例变量会作为view中form的数据来源。
而最后的一个参数 :per_page即为每页显示的最大数量，此处表示每页5行。

2. 在view页面中添加一行翻页器代码:
我将该翻页器放在form控件之后，也就是显示在form的下方。

<%= will_paginate @users , renderer: BootstrapPagination::Rails'%>

好了，赶紧看看效果吧！

翻页器显示效果 翻页后的url

可以看到，翻页器已经添加好了，并且实际翻页效果也不错，url会根据页面变化，并且UI确实也是bootstrap风格。只是这两个英文button看起来还是不太搭，容易被误会有装逼的嫌疑...还是改成中文的吧！🤔
另外，翻页器默认在最左边，看起来也怪怪的，强迫症表示特别不满意!

3. 修改翻页器的中文显示
will_paginate提供了一些配置参数可选，首先要做的就是在项目的config\initializers目录中创建一个名为will_paginate.rb的配置文件。然后在该文件中添加以下两行代码，然后重启rails server即可。

WillPaginate::ViewHelpers.pagination_options[:previous_label ]   =  "前一页"
WillPaginate::ViewHelpers.pagination_options[:next_label ]       =  "后一页"

不消多说，也能知道这两行代码有啥用。😶

4、修改翻页器的显示位置
这个就是CSS的范畴了。如下，给翻页器添加一个class，然后css控制下浮动位置即可。

#view中给翻页器添加一个class
<%= will_paginate @users , renderer: BootstrapPagination::Rails ,class: 'will_page'%>

#CSS代码
<style type="text/css">
  .will_page {
        float:right;
              }
</style>

以下是添加翻页器后的页面效果，有了翻页器看起来清爽许多~

大功告成！从此告别冗长的form页面

参考：
关于rails插件will_paginate的配置和用法