1. ИТ Шеф
  2. Вопросы и заметки

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

Александр
1K
16
0
Александр, добрый вечер, как можно использовать одновременно, две пагинации в 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
                Спасибо!
          Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.