Как использовать две разных пагинации в mFilter2

Александр
Александр
1,2K
16
Содержание:
  1. Комментарии
Александр, добрый вечер, как можно использовать одновременно, две пагинации в mFilter2, к примеру одна обычная а другая ajax, подгрузить ещё, если возможно, опишите пожалуйста, как это можно реализовать и можно ли вообще?

Комментарии:

  1. Евгений
    05 марта 2020, 15:22
    Вроде бы все работает, но вот контент и опции фильтров остаются доступными, и в результате пока ждешь загрузку, ты не понимаешь что происходит, и можно ткнуть в любое поле фильтра, что доп. фильтрацию.
    1. Александр Мальцев
      07 марта 2020, 08:12
      Ну сделайте этот процесс более информативным. Покажите на это время какой-нибудь анимированный значок или придумайте что-то другое. Область с фильтрами, например можно сделать недоступной на время выполнения этого процесса, чтобы пользователь ничего лишнего не нажал.
    2. Александр Мальцев
      23 января 2020, 16:43
      Добрый вечер!
      Пример совмещения постраничной навигации и кнопки «Загрузить ещё».
      Для этого по умолчанию устанавливаете постраничную навигацию.
      После этого:
      1. В чанке tpl.mFilter2.outer (параметр &tplOuter) добавляете кнопку, например, с классом btn_more:
      ...
      <div id="mse2_results">
        {$results}
      </div>
      <button class="btn btn-default btn_more">Загрузить еще</button>
      ..
      
      2. Добавляете на страницу скрипт:
      $('.btn_more').click(function() {
        var href= $('.mse2_pagination .page-item.active').next('.page-item').find('.page-link').attr('href');
        $.get(href, function(data) {
          var 
             mse2_results = $('#mse2_results', data),
             mse2_pagination = $('.mse2_pagination', data);
          $('#mse2_results').append(mse2_results);
          $('.mse2_pagination').html(mse2_pagination);
        });
      });
      
      1. Александр
        04 февраля 2020, 21:37
        Александр, доброго вечера! Скажите пожалуйста, как можно вывести в кнопке, количество ресурсов, которое будет подгружено?
        1. Александр Мальцев
          18 февраля 2020, 15:06
          Здравствуйте! Это можно выполнить с помощью JavaScript. Общее количество результатов мы можем получить из контента элемента "#mse2_total", текущую страницу из постраничной навигации, а количество результатов по умолчанию отображаемых на странице задать вручную. Потом это вычислить и добавить полученный результат к кнопке «Загрузить ещё».
          $(function(){
            function getCountPagesForLoad() {
              var 
                total = parseInt($('#mse2_total').text()),
                pageNo = parseInt($('.mse2_pagination .page-item.active > .page-link').text()),
                resultOnPage = 10,
                output = '';
              if ((pageNo) * resultOnPage < total && (pageNo + 1) * resultOnPage >= total) {
                output = total - pageNo * resultOnPage;    
              } else if ((pageNo + 1) * resultOnPage < total) {
                output = resultOnPage;
              }
              return output;
            } 
            $('.btn_more').text('Загрузить ещё ' + getCountPagesForLoad()); 
            $(document).on('mse2_load', function() {
              $('.btn_more').text('Загрузить ещё ' + getCountPagesForLoad()); 
            });
          });
          
          1. Александр
            19 февраля 2020, 15:10
            Здравствуйте! Спасибо Вам, у меня правда, почему-то выводит только (Загрузить ещё), более не чего, не могу понять пока, почему не работает, в
            output = '';
            не чего прописывать не нужно, правильно я понимаю?
            1. Александр Мальцев
              20 февраля 2020, 15:55
              Здравствуйте!
              Это значение по умолчанию, т.е. когда уже нечего подгружать.
              Если не выводится, то нужно посмотреть, как организована разметка, т.к. она у вас в проекте может отличаться от дефолтной.
              В этом случае необходимо добавить в код 2 строчки и посмотреть какие значения выводятся в консоль:
              $(function(){
                function getCountPagesForLoad() {
                  var 
                    total = parseInt($('#mse2_total').text()),
                    pageNo = parseInt($('.mse2_pagination .page-item.active > .page-link').text()),
                    resultOnPage = 10, // количество элементов на странице по умолчанию
                    output = '';
                  console.log('total = ' + total); // всего результатов
                  console.log('pageNo = ' + pageNo); // текущая страница
                  if ((pageNo) * resultOnPage < total && (pageNo + 1) * resultOnPage >= total) {
                    output = total - pageNo * resultOnPage;    
                  } else if ((pageNo + 1) * resultOnPage < total) {
                    output = resultOnPage;
                  }
                  return output;
                } 
                $('.btn_more').text('Загрузить ещё ' + getCountPagesForLoad()); 
                $(document).on('mse2_load', function() {
                  $('.btn_more').text('Загрузить ещё ' + getCountPagesForLoad()); 
                });
              });
              
              1. Александр
                20 февраля 2020, 17:07
                Добрый вечер! У меня с чанка tpl.mFilter2.outer всё вынесено в шаблон, в вызове фильтра: &toSeparatePlaceholders=`my.` возможно в этом проблема? В консоле выдаёт это:
                1. Александр Мальцев
                  21 февраля 2020, 13:54
                  Теперь нужно проверить правильные ли эти цифры? total совпадает с количеством результатов? pageNo показывает номер текущей страницы?
                  Также проверить какое количество результатов выводится на странице по умолчанию? Если не 10, то поменять значение этой переменной на нужное:
                  resultOnPage = 10, // количество результатов на странице по умолчанию
                  
                  Если total и pageNo не совпадают с действительностью, то посмотреть в каких элементах содержатся эти значения и с помощью каких селекторов их можно получить.
                  1. Александр
                    24 февраля 2020, 21:05
                    Здравствуйте! total да совпадает а этот параметр pageNo не совпадает, показывает 11 а id текущей страницы 2 и ещё когда результатов меньше чем указано по умолчанию, получаю pageNo = NaN
                    1. Александр Мальцев
                      25 февраля 2020, 14:35
                      В этом случае нужно посмотреть, как организована пагинация и изменить эту строчку так чтобы она выбирала номер правильно:
                      pageNo = parseInt($('.mse2_pagination .page-item.active > .page-link').text())
                      
                      Ну или как другой вариант номер страницы можно получить из URL страницы.
        2. Александр
          24 января 2020, 04:05
          Поспешил и забыл написать в предыдущем комментарии о такой проблеме, если использую две стандартных пагинации и подгрузку, при нажатии подгрузить к двум стандартным пагинациям добавляется еще две, как этого можно избежать?

          В шаблоне так:
          <div class="mse2_pagination">
           [[!+page.nav]]
          </div>
          
          <div id="mse2_results">
           [[+my.results]]
          </div>
          <button class="btn btn-default btn_more">Загрузить еще</button>
          
          <div class="mse2_pagination">
           [[!+page.nav]]
          </div>
          1. Александр Мальцев
            24 января 2020, 14:08
            Это пример.
            Там уже в зависимости от того, как у вас всё это организовано.
            Например, если у вас несколько пагинаций, то используйте ключевое слово this и определяйте элементы относительно уже этой кнопки:
            $('.btn_more').click(function () {
              var href = $(this).next('.mse2_pagination').find('.page-item.active').next('.page-item').find('.page-link').attr('href');
              $.get(href, function (data) {
                var
                  mse2_results = $('#mse2_results', data),
                  mse2_pagination = $('.mse2_pagination', data);
                $(this).prev('#mse2_results').append(mse2_results);
                $(this).next('.mse2_pagination').html(mse2_pagination);
              });
            });
            
          2. Александр
            24 января 2020, 03:29
            Здравствуйте! Александр, спасибо Вам, за отличное решение, правда не могу понять правильно ли у меня, всё работает. Чанк tpl.mFilter2.outer вынесен в обычный шаблон и этот параметр &tplOuter, я не использую а просто разместил скрипт в шаблоне и кнопку.

            Происходит следующее, если нажимаю подгрузить, подгружает, но когда грузить уже нечего, при нажатии на кнопку подгрузить, пропадает стандартная постраничная пагинация default, при следующем нажатии на кнопку повторно начинают грузятся ресурсы и так происходит до бесконечности, можно нажимать и они будут подгружаться, долго капался и предполагаю что в данном случае так и должно быть, так как класс disabled к кнопке не применяется, поэтому будет постоянная подгрузка при нажатии, правильно я понимаю?

            1. Александр Мальцев
              24 января 2020, 14:13
              Это можно дописать в файле "\assets\components\msearch2\js\web\default.js". Если результатов нет, то добавить к кнопке класс disabled.
              1. Александр
                24 января 2020, 18:14
                Спасибо!
          Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.