背景
去年在公司用rails写了个静态页面,用于监控自动化FTP服务器的磁盘使用量情况,当数据超过设定值后自动发送邮件报警。页面中有一个Form,用于添加监控项。刚开始监控的目录就七八项,页面看起来还好,但现在增加到了近20项,整个页面看起来就有点臃肿,所以打算抽空写个翻页按钮,将页面篇幅限制一下。
一、工具选择
虽然翻页功能可以自己用js实现,但是考虑到自己还是个js小白,果断放弃,转而求助于第三方库....逃~😂
经过一番度娘后不禁使我感叹:Rails的插件是真他娘的少啊😡!
不过好在还是有一款比较简单易用的开源插件:will_paginate。 该插件使用起来相当便捷,仅仅几行代码就能搞定翻页功能。除此以外,它还有个bootstrap版本。如果页面使用了bootstrap框架,就选择will_paginate-bootstrap吧!
由于本人项目中使用了到bootstrap,所以采用后者。
二、安装will_paginate:
- 在rails项目的Gemfile中添加 gem 'will_paginate-bootstrap'
- 再使用bundle install命令安装
- 重启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会根据页面变化,并且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页面