背景
去年在公司用rails寫了個(gè)靜態(tài)頁面探孝，用于監(jiān)控自動(dòng)化FTP服務(wù)器的磁盤使用量情況审丘，當(dāng)數(shù)據(jù)超過設(shè)定值后自動(dòng)發(fā)送郵件報(bào)警。頁面中有一個(gè)Form疯暑，用于添加監(jiān)控項(xiàng)训柴。剛開始監(jiān)控的目錄就七八項(xiàng)，頁面看起來還好妇拯，但現(xiàn)在增加到了近20項(xiàng)幻馁，整個(gè)頁面看起來就有點(diǎn)臃腫洗鸵，所以打算抽空寫個(gè)翻頁按鈕，將頁面篇幅限制一下仗嗦。
一膘滨、工具選擇
雖然翻頁功能可以自己用js實(shí)現(xiàn)，但是考慮到自己還是個(gè)js小白稀拐，果斷放棄火邓，轉(zhuǎn)而求助于第三方庫(kù)....逃~??
經(jīng)過一番度娘后不禁使我感嘆：Rails的插件是真他娘的少啊??！
不過好在還是有一款比較簡(jiǎn)單易用的開源插件:will_paginate德撬。 該插件使用起來相當(dāng)便捷铲咨，僅僅幾行代碼就能搞定翻頁功能。除此以外蜓洪，它還有個(gè)bootstrap版本纤勒。如果頁面使用了bootstrap框架，就選擇will_paginate-bootstrap吧隆檀！
由于本人項(xiàng)目中使用了到bootstrap摇天，所以采用后者。
二刚操、安裝will_paginate：
- 在rails項(xiàng)目的Gemfile中添加 gem 'will_paginate-bootstrap'
- 再使用bundle install命令安裝
- 重啟rails server即可
三闸翅、will_paginate的使用
前面提到過，will_paginate的使用特別簡(jiǎn)單菊霜，只需在controller和view中各增加一行代碼即可。
以我的index頁面為例：
1. 對(duì)controller中的index方法中的實(shí)例方法進(jìn)行下修改：
def index
#將原始的
@users = User.all
#修改為
@users = User.paginate(page: params[:page], :per_page => 5)
end
該實(shí)例變量會(huì)作為view中form的數(shù)據(jù)來源济赎。
而最后的一個(gè)參數(shù) :per_page即為每頁顯示的最大數(shù)量鉴逞，此處表示每頁5行。
2. 在view頁面中添加一行翻頁器代碼:
我將該翻頁器放在form控件之后司训，也就是顯示在form的下方构捡。
<%= will_paginate @users , renderer: BootstrapPagination::Rails'%>
好了，趕緊看看效果吧壳猜！
可以看到勾徽，翻頁器已經(jīng)添加好了，并且實(shí)際翻頁效果也不錯(cuò)统扳，url會(huì)根據(jù)頁面變化喘帚，并且UI確實(shí)也是bootstrap風(fēng)格。只是這兩個(gè)英文button看起來還是不太搭咒钟，容易被誤會(huì)有裝逼的嫌疑...還是改成中文的吧吹由！??
另外，翻頁器默認(rèn)在最左邊朱嘴，看起來也怪怪的倾鲫，強(qiáng)迫癥表示特別不滿意!
3. 修改翻頁器的中文顯示
will_paginate提供了一些配置參數(shù)可選粗合，首先要做的就是在項(xiàng)目的config\initializers目錄中創(chuàng)建一個(gè)名為will_paginate.rb的配置文件。然后在該文件中添加以下兩行代碼乌昔，然后重啟rails server即可隙疚。
WillPaginate::ViewHelpers.pagination_options[:previous_label ] = "前一頁"
WillPaginate::ViewHelpers.pagination_options[:next_label ] = "后一頁"
不消多說，也能知道這兩行代碼有啥用磕道。??
4供屉、修改翻頁器的顯示位置
這個(gè)就是CSS的范疇了。如下捅厂，給翻頁器添加一個(gè)class贯卦，然后css控制下浮動(dòng)位置即可。
#view中給翻頁器添加一個(gè)class
<%= will_paginate @users , renderer: BootstrapPagination::Rails ,class: 'will_page'%>
#CSS代碼
<style type="text/css">
.will_page {
float:right;
}
</style>
以下是添加翻頁器后的頁面效果焙贷，有了翻頁器看起來清爽許多~
大功告成撵割！從此告別冗長(zhǎng)的form頁面
