1、实现分页功能我们需要使用“kaminari”插件,我们先来安装一下
(1)粘贴下面代码到Gemfile文件中
gem 'kaminari'
(2)运行bundle install安装gem
/vagrant/data_system$ bundle install #系统返回信息 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中需要分页的内容(即@comments遍历里面的内容)分离到partial文件_show_posts.html.erb中
<% @comments.each do |comment| %> <div class="reply clearfix"> <div class="avatar"> <!-- get_account_name方法在comment.rb文件中已经定义,用来获取评论者的用户名 --> <a><%= comment.get_account_name %></a> </div> <div class="body"> <!-- 评论status为0时代表正常显示,不为0是代表已经被删除,被删除的评论需要显示为「该评论已删除」 --> <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"> <!-- 获取评论的创建时间 --> <%= comment.get_created_at %> <!-- 已被删除的帖子不显示回复链接 --> <span id="time_<%= comment.id %>"> <% if comment.status == 0 %> <a id="reply<%= comment.id %>" onclick="outIn(<%=comment.id%>,<%=comment.id%>)">回复</a> <% end %> </span> </div> <div id="reply_page_<%= comment.id %>"> <!-- 可以通过re_comment_id字段找到,这个评论下面所有的回复 --> <% @reply = Comment.where(re_comment_id:comment.id,as_type:1) %> <!-- 我们只默认展示两条回复,需要查看更多回复,需要点击查看更多回复 @reply.limit(2)的意思是只选择查询结果的前两条数据 --> <% @reply.limit(2).each do |re| %> <div class="re-reply"> <a><%= re.get_account_name %></a> <!-- 如果回复的是评论的回复,该回复用户名后面需要跟被回复用户的用户名,re_reply_id字段保存被回复用户的id;如果直接回复评论,那么回复用户名后面直接跟回复内容,re_reply_id字段为空。--> <% if re.re_reply_id.blank? %> : <% else %> 回复 <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方法控制回复框,当客户点击回复按钮,出现回复框, 回复变成取消回复,点击取消回复,回复框收起 --> <a id="reply<%= re.id %>" onclick="outIn(<%= comment.id %>,<%=re.id%>)"> 回复</a> <% end %> </span> </div> </div> <% end %> </div> <!-- 当该评论的回复大于两条时,下面会有「查看更多回复」的链接,点击会查看到更多回复 主要通过js的控制点击查看更多回复,后面会讲到 --> <% if @reply.count > 2 %> <a id="spread-out" name="1" data-remote="true" href="#">更多<%= @reply.count - 2 %>条回复 ↓</a> <% end %> </div> <!-- 回复框的内容 --> <%= form_for Comment.new,url: "#" do |f| %> <!-- 给每个评论的回复框的id都加上comment.id,这样每个评论都有唯一的id,这样才能通过js控制回复框出现在相应的评论下 --> <div class="comment-form reply-from" id="co-reply<%= comment.id %>" style="display:none;"> <input type="text" name="comment" placeholder="写下你的回复..." class="comment-text"> <div class="comment-submit"> <input type="submit" value="回复" 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,是实现ajax,这样点击分页的时候,会调用对应方法的js.erb模板,实现局部刷新。
5、修改views/posts/show_posts.html.erb文件,在刚刚分类出partial文件的代码位置添加render,加载partial文件
<%= render :partial => "/posts/show_posts"%>
6、创建views/posts/show_posts.js.erb文件,粘贴下列代码。
$("#data_content").html('<%= j render "/posts/show_posts" %>');
代码解析:
每次点击分页的时候,都会调用这个show_posts.js.erb文件,文件会加载某一页的内容。
这句代码的意思为,在id为”data_content”的标签中,加载partial文件_show_posts.html.erb里面的内容。
render前面的 j 是escape_javascript的缩写,意思是为javascript片段去掉字符串中的回车符,单引号,双引号
7、创建config/locales/zh_CN.yml文件,添加下面代码,将项目中对应的英文自动转换成中文
zh-CN: views: pagination: first: "首页" last: "尾页" previous: "上一页" next: "下一页" truncate: "..."
代码解析:
first: "首页"
表示views文件夹中,class元素为pagination标签包含的内容中,如果为「first」自动显示为「首页」
8、在 Rails 项目的 config/application.rb 文件中写上下面代码,将默认语言设为中文,就大功告成了~
config.i18n.default_locale = :'zh-CN'
实现分页功能总结:
A、先安装gem插件kaminari,在配置文件中配置好对应的配置。
B、在controller文件中将要分页的集合后面添加.page(params[:page]).per(n)
C、将html.erb文件中需要分页的对象集合的部分提取到partial文件中,并且在partial文件的后面加上分页代码<%= paginate @comments,:remote => true %>
D、最后创建同名js.erb文件,写上加载partial文件的代码。
分页功能就完成了~~
分页功能参考:
https://github.com/kaminari/kaminari