Ank*_*oni 4 pagination ruby-on-rails will-paginate news-feed ruby-on-rails-3
我在will_paginaterails 3应用程序上使用gem.现在,它正确分页,并显示列表底部的所有页码,以及上一个和下一个按钮.
我希望分页的行为类似于Facebook新闻源,而不是显示页码.也就是说,如果我当前在页面上显示10个项目,并且用户单击"下一个"按钮,则页面应向下延伸,并且总体上显示20个项目.我正在寻找一种方法来修改will_paginategem或使用AJAX来实现这一目标.
按照以下步骤显示单击按钮的更多结果:
以下代码将删除页码,只显示next和prev按钮:
<%= will_paginate @posts, :page_links => false %>
Run Code Online (Sandbox Code Playgroud)
你可以在这里找到更多的分页样式
使用示例AJAX编辑:
1.创建一个页码为隐藏字段的表单
<%= form_tag url, :id => :filter, :method => :get do%>
<%= hidden_field_tag :page, page %>
<% end %>
Run Code Online (Sandbox Code Playgroud)
2.添加"更多"的范围
<span class='more-results' >More</span>
Run Code Online (Sandbox Code Playgroud)
3.Javascript函数用于绑定表单的点击和AJAX提交
function bindMoreResults() {
jQuery("span.more-results").unbind("click");
jQuery("span.more-results").click(
function(e){
e.preventDefault();
getMoreResults();
});
}
function getMoreResults() {
jQuery('span.more-results').hide();
var page_value = parseInt(jQuery("form#filter #page").val()) + 1;
jQuery("form#filter #page").val(page_value);
var form = jQuery("form#filter");
jQuery.getJSON(
form.attr("action") + ".json",
form.serialize(),
appendData
);
}
function appendData(data) {
jQuery('span.more-results').show();
//parse the data and append it
}
Run Code Online (Sandbox Code Playgroud)
4. appendData相应地修改.点击此处查看有关getJSON的更多信息:http://api.jquery.com/jQuery.getJSON/
| 归档时间: |
|
| 查看次数: |
2438 次 |
| 最近记录: |