Rails: will_paginate “显示下 10 个”按钮？

发布于 2024-12-01 08:38:22 字数 253 浏览 7 评论 0原文

我在 Rails 3 应用程序上使用 will_paginate gem。现在，它可以正确分页，并在列表底部显示所有页码，以及上一个和下一个按钮。

我希望分页表现得像 Facebook 新闻源，而不是显示页码。也就是说，如果我当前在页面上显示 10 个项目，并且用户单击“下一步”按钮，则页面应向下延伸，并总共显示 20 个项目。我正在寻找一种方法来修改 will_paginate gem 或使用 AJAX 来完成此任务。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

剑心龙吟 2024-12-08 08:38:22

请按照以下步骤在单击按钮时显示更多结果：

不要在视图中使用 will_paginate 标记
使用 AJAX 在单击“下一个”链接时获取下一组结果

以下代码将删除页码，只显示下一个和上一个按钮：

<%= will_paginate @posts, :page_links => false %>

您可以在此处找到更多分页样式

使用示例 AJAX 编辑：

1.创建一个将页码作为隐藏字段的表单

<%= form_tag url, :id => :filter, :method => :get do%>
    <%= hidden_field_tag :page, page %>
<% end %>

2.为“更多”添加一个跨度

<span class='more-results' >More</span>

3.用于绑定表单的点击和 AJAX 提交的 JavaScript 函数

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
}

4.相应地修改 appendData 。在这里查看有关 getJSON 的更多信息： http://api.jquery.com/jQuery.getJSON/

Follow these for showing more results on click of button:

Don't use will_paginate tag in the views
Use AJAX for fetching the next set of results on click of "next" link

The following code will remove the page numbers and just show the next and prev buttons:

<%= will_paginate @posts, :page_links => false %>

You can find more styles for pagination here

Edited with sample AJAX:

1.Create a form which has page number as hidden field

<%= form_tag url, :id => :filter, :method => :get do%>
    <%= hidden_field_tag :page, page %>
<% end %>

2.Add a span for "More"

<span class='more-results' >More</span>

3.Javascript functions for binding the clicks and AJAX submit of the form

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
}

4.Modify the appendData accordingly. Check here for more about getJSON: http://api.jquery.com/jQuery.getJSON/

回复收藏 0 原文

~没有更多了~