开发者

Rails: will_paginate "Show next 10" button?

开发者 https://www.devze.com 2023-03-31 04:27 出处:网络
I\'m using the will_paginate gem on a rails 3 app. Right now, it paginates correctly, and shows all the page numbers at the bottom for the listing, as well as the previous and next buttons.

I'm using the will_paginate gem on a rails 3 app. Right now, it paginates correctly, and shows all the page numbers at the bottom for the listing, as well as the previous and next buttons.

Instead of showing pa开发者_如何学编程ge numbers, I want the pagination to behave like the Facebook news feed. That is, if I am displaying 10 items on the page currently, and the user clicks the 'next' button, the page should extend downwards, and display 20 items overall. I'm looking for a way to modify the will_paginate gem or use AJAX to accomplish this.


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

精彩评论

暂无评论...
验证码 换一张
取 消