1、實(shí)現(xiàn)分頁(yè)功能我們需要使用“kaminari”插件，我們先來(lái)安裝一下

（1）粘貼下面代碼到Gemfile文件中

gem 'kaminari'

（2）運(yùn)行bundle install安裝gem

/vagrant/data_system$ bundle install #系統(tǒng)返回信息 Fetching gem metadata from [https://rubygems.org/](https://rubygems.org/)........... Fetching gem metadata from [https://rubygems.org/](https://rubygems.org/).. Fetching kaminari-core 1.1.1 Installing kaminari-core 1.1.1 Fetching kaminari-actionview 1.1.1 Installing kaminari-actionview 1.1.1 Fetching kaminari-activerecord 1.1.1 Installing kaminari-activerecord 1.1.1 Fetching kaminari 1.1.1 Installing kaminari 1.1.1 Bundle complete! 18 Gemfile dependencies, 82 gems now installed.

2、修改posts_controller.rb文件中的show_posts方法，將要分頁(yè)的對(duì)象集合加上.page(params[:page]).per(10)，其中10代表每頁(yè)顯示10條

#原代碼 @comments = Comment.where(post_id:post_id,as_type:0).order(updated_at: :desc) #改為 @comments = Comment.where(post_id:post_id,as_type:0).order(updated_at: :desc).page(params[:page]).per(10)

3、新建partial文件views/posts/_show_posts.html.erb，將show_posts.html.erb中需要分頁(yè)的內(nèi)容(即@comments遍歷里面的內(nèi)容)分離到partial文件_show_posts.html.erb中

<% @comments.each do |comment| %><div class="reply clearfix"><div class="avatar"><!-- get_account_name方法在comment.rb文件中已經(jīng)定義，用來(lái)獲取評(píng)論者的用戶名 --><a><%= comment.get_account_name %></a></div><div class="body"><!-- 評(píng)論status為0時(shí)代表正常顯示，不為0是代表已經(jīng)被刪除，被刪除的評(píng)論需要顯示為「該評(píng)論已刪除」 --><span id="content_<%= comment.id %>"><% if comment.status == 0 %><div><%= comment.content %></div><% else %><div class="delete-content">該評(píng)論已刪除</div><% end %></span><div class="time_right"><!-- 獲取評(píng)論的創(chuàng)建時(shí)間 --><%= comment.get_created_at %><!-- 已被刪除的帖子不顯示回復(fù)鏈接 --><span id="time_<%= comment.id %>"><% if comment.status == 0 %><a id="reply<%= comment.id %>" onclick="outIn(<%=comment.id%>,<%=comment.id%>)">回復(fù)</a><% end %></span></div><div id="reply_page_<%= comment.id %>"><!-- 可以通過(guò)re_comment_id字段找到，這個(gè)評(píng)論下面所有的回復(fù) --><% @reply = Comment.where(re_comment_id:comment.id,as_type:1) %><!-- 我們只默認(rèn)展示兩條回復(fù)，需要查看更多回復(fù)，需要點(diǎn)擊查看更多回復(fù)@reply.limit(2)的意思是只選擇查詢(xún)結(jié)果的前兩條數(shù)據(jù) --><% @reply.limit(2).each do |re| %><div class="re-reply"> <a><%= re.get_account_name %></a><!-- 如果回復(fù)的是評(píng)論的回復(fù)，該回復(fù)用戶名后面需要跟被回復(fù)用戶的用戶名，re_reply_id字段保存被回復(fù)用戶的id；如果直接回復(fù)評(píng)論，那么回復(fù)用戶名后面直接跟回復(fù)內(nèi)容，re_reply_id字段為空。--><% if re.re_reply_id.blank? %>:<% else %>回復(fù) <a><%= Comment.find(re.re_reply_id).get_account_name %></a> :<% end %><span id="content_<%= re.id %>"><% if re.status == 0 %><span><%= re.content %></span><% else %><span class="delete-content">該評(píng)論已刪除</span><% end %></span><div class="time_right"><%= re.get_created_at %><span id="time_<%= re.id %>"><% if re.status == 0 %><!-- outIn方法控制回復(fù)框，當(dāng)客戶點(diǎn)擊回復(fù)按鈕，出現(xiàn)回復(fù)框，回復(fù)變成取消回復(fù)，點(diǎn)擊取消回復(fù)，回復(fù)框收起 --><a id="reply<%= re.id %>" onclick="outIn(<%= comment.id %>,<%=re.id%>)"> 回復(fù)</a><% end %></span></div></div><% end %></div><!-- 當(dāng)該評(píng)論的回復(fù)大于兩條時(shí)，下面會(huì)有「查看更多回復(fù)」的鏈接，點(diǎn)擊會(huì)查看到更多回復(fù)主要通過(guò)js的控制點(diǎn)擊查看更多回復(fù)，后面會(huì)講到 --><% if @reply.count > 2 %><a id="spread-out" name="1" data-remote="true" href="#">更多<%= @reply.count - 2 %>條回復(fù) ↓</a><% end %></div><!-- 回復(fù)框的內(nèi)容 --><%= form_for Comment.new,url: "#" do |f| %><!-- 給每個(gè)評(píng)論的回復(fù)框的id都加上comment.id，這樣每個(gè)評(píng)論都有唯一的id，這樣才能通過(guò)js控制回復(fù)框出現(xiàn)在相應(yīng)的評(píng)論下 --><div class="comment-form reply-from" id="co-reply<%= comment.id %>" style="display:none;"><input type="text" name="comment" placeholder="寫(xiě)下你的回復(fù)..." class="comment-text"><div class="comment-submit"><input type="submit" value="回復(fù)" class="submit-issue-button btn btn-primary"></div></div><% end %></div><%end%>

4、在partial文件_show_posts.html.erb文件的底部加上下面代碼，會(huì)在頁(yè)面上顯示分頁(yè)的樣式。

<div class="dataTables_paginate"><%= paginate @comments,:remote => true %> </div>

代碼解析：

• <%= paginate @comments,:remote => true %>
  其中@comments為需要分頁(yè)的對(duì)象集合
  其中:remote => true，是實(shí)現(xiàn)ajax，這樣點(diǎn)擊分頁(yè)的時(shí)候，會(huì)調(diào)用對(duì)應(yīng)方法的js.erb模板，實(shí)現(xiàn)局部刷新。

5、修改views/posts/show_posts.html.erb文件，在剛剛分類(lèi)出partial文件的代碼位置添加render，加載partial文件

<%= render :partial => "/posts/show_posts"%>

6、創(chuàng)建views/posts/show_posts.js.erb文件，粘貼下列代碼。

$("#data_content").html('<%= j render "/posts/show_posts" %>');

代碼解析：
每次點(diǎn)擊分頁(yè)的時(shí)候，都會(huì)調(diào)用這個(gè)show_posts.js.erb文件，文件會(huì)加載某一頁(yè)的內(nèi)容。
這句代碼的意思為，在id為”data_content”的標(biāo)簽中，加載partial文件_show_posts.html.erb里面的內(nèi)容。

render前面的 j 是escape_javascript的縮寫(xiě)，意思是為javascript片段去掉字符串中的回車(chē)符，單引號(hào)，雙引號(hào)

7、創(chuàng)建config/locales/zh_CN.yml文件，添加下面代碼，將項(xiàng)目中對(duì)應(yīng)的英文自動(dòng)轉(zhuǎn)換成中文

zh-CN:views:pagination:first: "首頁(yè)"last: "尾頁(yè)"previous: "上一頁(yè)"next: "下一頁(yè)"truncate: "..."

代碼解析：

• first: "首頁(yè)"
  表示views文件夾中，class元素為pagination標(biāo)簽包含的內(nèi)容中，如果為「first」自動(dòng)顯示為「首頁(yè)」

8、在 Rails 項(xiàng)目的 config/application.rb 文件中寫(xiě)上下面代碼，將默認(rèn)語(yǔ)言設(shè)為中文，就大功告成了~

config.i18n.default_locale = :'zh-CN'

實(shí)現(xiàn)分頁(yè)功能總結(jié)：
A、先安裝gem插件kaminari，在配置文件中配置好對(duì)應(yīng)的配置。
B、在controller文件中將要分頁(yè)的集合后面添加.page(params[:page]).per(n)
C、將html.erb文件中需要分頁(yè)的對(duì)象集合的部分提取到partial文件中，并且在partial文件的后面加上分頁(yè)代碼<%= paginate @comments,:remote => true %>
D、最后創(chuàng)建同名js.erb文件，寫(xiě)上加載partial文件的代碼。
分頁(yè)功能就完成了~~

分頁(yè)功能參考：
https://github.com/kaminari/kaminari

總結(jié)

以上是生活随笔為你收集整理的【Ruby on Rails全栈课程】4.4 评论功能实现（三）--分页（插件Kaminari）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。