Как реализовать кнопку «Показать ещё»?

Question

[Nick Bukovskiy]

Есть список товаров и кнопка "Показать ещё". При нажатии должна отображаться ещё "порция" товаров.
Как это правильно реализовать на сегодняшний день? Я находил статьи как это сделать, но они довольно старые и я не знаю поменялся ли подход.
Так же слышал про pjax, возможно ли с помощью его можно реализовать?
Буду рад любому примеру!

Comments

[Сергей delphinpro]

Так же, как и вчера =)
Нажали на кнопку, подгрузили данные, вставили в страницу.

Answer 1

[Владимир Скибин]

Самый простой

var page = 2;
$('.elements').data('loading', false);

$('.more-button').on('click', function() {
if (!$('.elements').data('loading') && (!$('.elements').data('last_load_page') || page != $('.elements').data('last_load_page'))) {
          $('.elements').data('loading', true);
          $('<div/>').load('/catalog/?page=' + (page++) + ' .elements .element', function() {
            $('.elements').append($(this).find('.element'));
            $('.elements').data('last_load_page', page);
            $('.elements').data('loading', false);
          });
        }
});

Не выключать обычный пагинатор, его очень любят СЕО, и используя его уже догружать в общий список элементы. Не изящно, но работает.

Answer 2

[Евгений Калибров]

Да, это реализуется с помощью AJAX запроса, который выполняется по нажатию кнопки "Показать ещё". Запрос подтягивает данные (или уже отрендеренный html), по следующей порции товаров. Это похоже на постраничную навигацию, только предыдущие товары позиции остаются на экране, а к ним добавляются следующие по очереди, как бы со следующей страницы.

Вот плагин и демо - www.jqueryscript.net/demo/AJAX-Based-jQuery-Load-M...

Comments

[Евгений Калибров]

Nick Bukovskiy получилось разобраться с задачей?