Заменяем постраничку у запроса на прокрутку Ajax

Делимся интересными и полезными решениями
Аватара пользователя
M@dD3n
Администратор
Сообщения: 654
Зарегистрирован: 25 июн 2015, 09:20
Откуда: Russia
Благодарил (а): 28 раз
Поблагодарили: 99 раз
Контактная информация:

Заменяем постраничку у запроса на прокрутку Ajax

Сообщение M@dD3n » 02 окт 2017, 12:04

Создаем обычный Запрос

В Параметры запроса
Выставляем кол-во выводимых товар, ставим галочки Показывать навигацию, Разрешить внешнее обращение, Выполнять только по Ajax

Оформляем Основной шаблон оформления запроса и Шаблон оформления для элементов запроса, как это делается всегда

В Основной шаблон оформления запроса не ставим тег [tag:pages], вывод постраничной навигации нам не понадобится, только ее инициализация (галочка Показывать навигацию)

В Основной шаблон оформления запроса добавляем в самое начало

Код: Выделить всё

<?
    
// Текущая страница постранички
    $curent = (int)'[tag:pages:curent]';
    // Общее кол-во постраничек
    $total = (int)'[tag:pages:total]';

    if ($curent < $total)
        $next = $curent+1;
    else if ($curent == $total)
        $next = null;
    else
        $next 
= null;
?>


Оборачиваем тег [tag:content] каким нибудь контейнером добавляем ему data-next="<?= $next; ?>"
К примеру:

Код: Выделить всё

<section class="listing" data-next="<?= $next; ?>">
   <div class="row">
   [tag:content]
   </div>
</section>


Все, сам запрос готов

Дальше просто добавляем примерны JS код в общий шаблон или подключаем, как внешний файл:

Код: Выделить всё

$(function() {

   var scrollStart = false,         //-- False
      offsetScroll = 250,         //-- Пикселей до конца страницы, прежде чем начнет выполнятся Аякс
      selectElement = 'section',      //-- Селектор
      request_id = 'ajax';         //-- ID или Алиас Запроса

   $(window).scroll(function () {
      if ($(window).height() + $(window).scrollTop() + offsetScroll >= $(document).height()) {

         if (scrollStart == false)
         {
            //-- ID следующей страницы
            var page_id = $(selectElement + ':last').data('next');

            scrollStart = true;

            //-- Если ID следующей страницы пусто, ничего не делаем
            if (page_id <= 0 || page_id == '')
               return false;

            $.ajax({
               url: '/',
               data: {
                  request: request_id,
                  apage: page_id
               },
               type: 'POST',
               beforeSend: function () {
                  //-- Действия перед выполнением аякса (можно показать прелоадер и тд)
               },
               complete: function() {
                  //-- Действия когда запрос совершен (можно убрать прелоадер и тд)
               },
               success: function (data) {
                  //-- Добавляем информацию после последнего элемента (селектор)
                  $(selectElement + ':last').after(data);

                  //-- False
                  scrollStart = false;
               }
            });
         }
      }
   });

});


Пример

Аватара пользователя
Alex00
Местный
Сообщения: 41
Зарегистрирован: 20 июл 2016, 22:38
Благодарил (а): 1 раз
Поблагодарили: 2 раза

Заменяем постраничку у запроса на прокрутку Ajax

Сообщение Alex00 » 02 окт 2017, 20:30

Когда-то делал подобное с помощью плагина jscroll
http://novostroy-el.ru/novoe-yalagino-25-26.html

Аватара пользователя
M@dD3n
Администратор
Сообщения: 654
Зарегистрирован: 25 июн 2015, 09:20
Откуда: Russia
Благодарил (а): 28 раз
Поблагодарили: 99 раз
Контактная информация:

Заменяем постраничку у запроса на прокрутку Ajax

Сообщение M@dD3n » 02 окт 2017, 21:02

Alex00 писал(а):Когда-то делал подобное с помощью плагина jscroll
http://novostroy-el.ru/novoe-yalagino-25-26.html


:thumbup:

А вообще, как я уже много раз писал возможности и инструменты все есть, остается только пользоваться ))))

morro
Гость
Сообщения: 2
Зарегистрирован: 13 окт 2017, 20:23

Заменяем постраничку у запроса на прокрутку Ajax

Сообщение morro » 13 окт 2017, 20:48

У меня ошибка.
В консоли
jquery.min.js:4 GET http://ave.saymy.net/404-not-found 404 (Not Found)

morro
Гость
Сообщения: 2
Зарегистрирован: 13 окт 2017, 20:23

Заменяем постраничку у запроса на прокрутку Ajax

Сообщение morro » 13 окт 2017, 21:06

Курить мне меньше надо.
Спасибо автору.
Класс все работает.
Решение то что надо.


Вернуться в «Интересные решения»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость