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

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

gem 'kaminari'

（2）運行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方法，將要分頁的對象集合加上.page(params[:page]).per(10)，其中10代表每頁顯示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中需要分頁的內(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)定義，用來獲取評論者的用戶名 --><a><%= comment.get_account_name %></a></div><div class="body"><!-- 評論status為0時代表正常顯示，不為0是代表已經(jīng)被刪除，被刪除的評論需要顯示為「該評論已刪除」 --><span id="content_<%= comment.id %>"><% if comment.status == 0 %><div><%= comment.content %></div><% else %><div class="delete-content">該評論已刪除</div><% end %></span><div class="time_right"><!-- 獲取評論的創(chuàng)建時間 --><%= 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 %>"><!-- 可以通過re_comment_id字段找到，這個評論下面所有的回復(fù) --><% @reply = Comment.where(re_comment_id:comment.id,as_type:1) %><!-- 我們只默認展示兩條回復(fù)，需要查看更多回復(fù)，需要點擊查看更多回復(fù)@reply.limit(2)的意思是只選擇查詢結(jié)果的前兩條數(shù)據(jù) --><% @reply.limit(2).each do |re| %><div class="re-reply"> <a><%= re.get_account_name %></a><!-- 如果回復(fù)的是評論的回復(fù)，該回復(fù)用戶名后面需要跟被回復(fù)用戶的用戶名，re_reply_id字段保存被回復(fù)用戶的id；如果直接回復(fù)評論，那么回復(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">該評論已刪除</span><% end %></span><div class="time_right"><%= re.get_created_at %><span id="time_<%= re.id %>"><% if re.status == 0 %><!-- outIn方法控制回復(fù)框，當(dāng)客戶點擊回復(fù)按鈕，出現(xiàn)回復(fù)框，回復(fù)變成取消回復(fù)，點擊取消回復(fù)，回復(fù)框收起 --><a id="reply<%= re.id %>" onclick="outIn(<%= comment.id %>,<%=re.id%>)"> 回復(fù)</a><% end %></span></div></div><% end %></div><!-- 當(dāng)該評論的回復(fù)大于兩條時，下面會有「查看更多回復(fù)」的鏈接，點擊會查看到更多回復(fù)主要通過js的控制點擊查看更多回復(fù)，后面會講到 --><% 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| %><!-- 給每個評論的回復(fù)框的id都加上comment.id，這樣每個評論都有唯一的id，這樣才能通過js控制回復(fù)框出現(xiàn)在相應(yīng)的評論下 --><div class="comment-form reply-from" id="co-reply<%= comment.id %>" style="display:none;"><input type="text" name="comment" placeholder="寫下你的回復(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文件的底部加上下面代碼，會在頁面上顯示分頁的樣式。

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

代碼解析：

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

5、修改views/posts/show_posts.html.erb文件，在剛剛分類出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ào)用這個show_posts.js.erb文件，文件會加載某一頁的內(nèi)容。
這句代碼的意思為，在id為”data_content”的標(biāo)簽中，加載partial文件_show_posts.html.erb里面的內(nèi)容。

render前面的 j 是escape_javascript的縮寫，意思是為javascript片段去掉字符串中的回車符，單引號，雙引號

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

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

代碼解析：

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

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

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

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

分頁功能參考：
https://github.com/kaminari/kaminari

總結(jié)

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

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