Rails:will_paginate"显示下一个10"按钮?

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来实现这一目标.

lee*_*asn 8

按照以下步骤显示单击按钮的更多结果:

  • 不要在视图中使用will_paginate标记
  • 单击"下一步"链接,使用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/