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

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

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

  1. Евгений
    Евгений
    2020-03-05 15:22:43
    Вроде бы все работает, но вот контент и опции фильтров остаются доступными, и в результате пока ждешь загрузку, ты не понимаешь что происходит, и можно ткнуть в любое поле фильтра, что доп. фильтрацию.
  1. Александр Мальцев
    Александр Мальцев
    2020-03-07 08:12:24
    Ну сделайте этот процесс более информативным. Покажите на это время какой-нибудь анимированный значок или придумайте что-то другое. Область с фильтрами, например можно сделать недоступной на время выполнения этого процесса, чтобы пользователь ничего лишнего не нажал.
  • Александр Мальцев
    Александр Мальцев
    2020-01-23 16:43:15
    Добрый вечер!
    Пример совмещения постраничной навигации и кнопки «Загрузить ещё».
    Для этого по умолчанию устанавливаете постраничную навигацию.
    После этого:
    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. Александр
      Александр
      2020-01-24 03:29:20
      Здравствуйте! Александр, спасибо Вам, за отличное решение, правда не могу понять правильно ли у меня, всё работает. Чанк tpl.mFilter2.outer вынесен в обычный шаблон и этот параметр &tplOuter, я не использую а просто разместил скрипт в шаблоне и кнопку.

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

    2. Александр
      Александр
      2020-01-24 04:05:50
      Поспешил и забыл написать в предыдущем комментарии о такой проблеме, если использую две стандартных пагинации и подгрузку, при нажатии подгрузить к двум стандартным пагинациям добавляется еще две, как этого можно избежать?

      В шаблоне так:
      <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>
    3. Александр Мальцев
      Александр Мальцев
      2020-01-24 14:08:25
      Это пример.
      Там уже в зависимости от того, как у вас всё это организовано.
      Например, если у вас несколько пагинаций, то используйте ключевое слово 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);
        });
      });
      
    4. Александр Мальцев
      Александр Мальцев
      2020-01-24 14:13:29
      Это можно дописать в файле "\assets\components\msearch2\js\web\default.js". Если результатов нет, то добавить к кнопке класс disabled.
    5. Александр
      Александр
      2020-01-24 18:14:18
      Спасибо!
    6. Александр
      Александр
      2020-02-04 21:37:36
      Александр, доброго вечера! Скажите пожалуйста, как можно вывести в кнопке, количество ресурсов, которое будет подгружено?
    7. Александр Мальцев
      Александр Мальцев
      2020-02-18 15:06:52
      Здравствуйте! Это можно выполнить с помощью 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()); 
        });
      });
      
    8. Александр
      Александр
      2020-02-19 15:10:03
      Здравствуйте! Спасибо Вам, у меня правда, почему-то выводит только (Загрузить ещё), более не чего, не могу понять пока, почему не работает, в
      output = '';
      не чего прописывать не нужно, правильно я понимаю?
    9. Александр Мальцев
      Александр Мальцев
      2020-02-20 15:55:44
      Здравствуйте!
      Это значение по умолчанию, т.е. когда уже нечего подгружать.
      Если не выводится, то нужно посмотреть, как организована разметка, т.к. она у вас в проекте может отличаться от дефолтной.
      В этом случае необходимо добавить в код 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()); 
        });
      });
      
    10. Александр
      Александр
      2020-02-20 17:07:31
      Добрый вечер! У меня с чанка tpl.mFilter2.outer всё вынесено в шаблон, в вызове фильтра: &toSeparatePlaceholders=`my.` возможно в этом проблема? В консоле выдаёт это:
    11. Александр Мальцев
      Александр Мальцев
      2020-02-21 13:54:35
      Теперь нужно проверить правильные ли эти цифры? total совпадает с количеством результатов? pageNo показывает номер текущей страницы?
      Также проверить какое количество результатов выводится на странице по умолчанию? Если не 10, то поменять значение этой переменной на нужное:
      resultOnPage = 10, // количество результатов на странице по умолчанию
      
      Если total и pageNo не совпадают с действительностью, то посмотреть в каких элементах содержатся эти значения и с помощью каких селекторов их можно получить.
    12. Александр
      Александр
      2020-02-24 21:05:45
      Здравствуйте! total да совпадает а этот параметр pageNo не совпадает, показывает 11 а id текущей страницы 2 и ещё когда результатов меньше чем указано по умолчанию, получаю pageNo = NaN
    13. Александр Мальцев
      Александр Мальцев
      2020-02-25 14:35:45
      В этом случае нужно посмотреть, как организована пагинация и изменить эту строчку так чтобы она выбирала номер правильно:
      pageNo = parseInt($('.mse2_pagination .page-item.active > .page-link').text())
      
      Ну или как другой вариант номер страницы можно получить из URL страницы.
    14. Alexandr
      Alexandr
      2022-08-13 10:52:43
      Здравствуйте. Столкнулся с такой же проблемой организовать две пагинации на странице.
      Сделал так как вы написали выше, кнопка отображается но при нажатии подгружаются те же товары что и выводятся, при этом в адресной строке адрес не меняется когда переходишь на вторую страницу. Т.е. получается что как такового перехода на вторую страницу нет.

      Не подскажете как реализовать что бы подгружались следующие товары?