Rails: will_paginate кнопка «Показать следующие 10»? - PullRequest
Новая
       40

Rails: will_paginate кнопка «Показать следующие 10»?

4 голосов
/ 25 августа 2011

Я использую камень will_paginate в приложении rails 3. Прямо сейчас он правильно разбивает на страницы и показывает все номера страниц внизу для списка, а также кнопки предыдущего и следующего.

Вместо того, чтобы показывать номера страниц, я хочу, чтобы нумерация страниц велась как лента новостей в Facebook. То есть, если в настоящий момент на странице отображается 10 элементов, а пользователь нажимает кнопку «Далее», страница должна расширяться вниз и отображать в общей сложности 20 элементов. Я ищу способ изменить гем will_paginate или использовать AJAX для достижения этой цели.

1 Ответ

8 голосов
/ 25 августа 2011

Следуйте этим инструкциям для отображения дополнительных результатов при нажатии кнопки:

  • Не используйте тег 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. Функции 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
}

4. Соответственно измените appendData.Проверьте здесь больше о getJSON: http://api.jquery.com/jQuery.getJSON/

...