Бесконечная прокрутка с помощью Ruby on Rails и jQuery

Не всегда удобен архаичный список номеров страниц, пользователю не нужно знать о них, он просто хочет поскроллить и посмотреть больше материала. В таких случаях прекрасно подходит бесконечная прокрутка — при достижении конца страницы материал динамически подгружается, не обновляя всю страницу. Примеров использования море: vk, twitter, instagram, pinterest, etc.

Делается бесконечная прокрутка весьма просто. По сути, это та же самая пагинация, только с помощью ajax.

И так, для начала подключим гем will_paginate, можно также использовать kaminari — особой разницы нет (а можно не подключать очередной гем для пары методов и обойтись limit и offset 🙃).

Теперь перейдем в контроллер, в котором мы хотим сделать пагинацию (для примера используем каноничный PostController). Метод get_posts возвращает страницу, указанную params[‘page’] или первую по умолчанию. Количество постов на страницу определенно в классе модели Post. Метод pagination понадобится нам в дальнейшем для ajax-запросов.

PostController

В routes.rb прописываем роут для ajax-запроса:

Во вьюхе рендерим первую страницу постом и блок для пагинации, который, помимо того, что хранит информацию о количестве страниц, url ajax-запроса и контейнере для подгрузки постов, будет отображать гифку процесса загрузки постов:

Post#index view
Partial for pagination block

И так, мы подошли к самому вкусному — к скрипту, который будет нам все загружать (не забудьте подключить его в application.js or otherwise)🤤

Результат выглядит примерно так:

GIFку делал с помощью LICEcap :)

UPDATE:

Для того, чтобы следующая страница подгружалась корректно, ajax-запрос должен содержать все те параметры, которые содержатся в исходном. Некоторые параметры не содержатся явным образов в адресной сроке, а хранятся в хэше params. Для того, передать эти параметры в js, добавим helper, который возвращает нам строку параметров:

В контроллере допишем к концу@endpoint filter_params и voila! — все работает! Наш скрипт уже знает, что дописывать к @endpoint &page или ?page.

)

Александр Светлый

Written by

Young passionate web developer from Russia 🇷🇺 https://github.com/ugg0t

Roonyx

Roonyx

Strong opinions and shared thoughts on design, business, and tech. By the makers (and friends) of Roonyx. Since 2005.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade