Как использовать две разных пагинации в mFilter2
Александр
562
0
Александр, добрый вечер, как можно использовать одновременно, две пагинации в mFilter2, к примеру одна обычная а другая ajax, подгрузить ещё, если возможно, опишите пожалуйста, как это можно реализовать и можно ли вообще?
Если статья понравилась, то поделитесь ей в социальных сетях:
Комментарии ()
Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.
Пример совмещения постраничной навигации и кнопки «Загрузить ещё».
Для этого по умолчанию устанавливаете постраничную навигацию.
После этого:
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); }); });$(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()); }); });Это значение по умолчанию, т.е. когда уже нечего подгружать.
Если не выводится, то нужно посмотреть, как организована разметка, т.к. она у вас в проекте может отличаться от дефолтной.
В этом случае необходимо добавить в код 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, то поменять значение этой переменной на нужное:
Если total и pageNo не совпадают с действительностью, то посмотреть в каких элементах содержатся эти значения и с помощью каких селекторов их можно получить.
pageNo = parseInt($('.mse2_pagination .page-item.active > .page-link').text())Ну или как другой вариант номер страницы можно получить из URL страницы.В шаблоне так:
Там уже в зависимости от того, как у вас всё это организовано.
Например, если у вас несколько пагинаций, то используйте ключевое слово 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); }); });Происходит следующее, если нажимаю подгрузить, подгружает, но когда грузить уже нечего, при нажатии на кнопку подгрузить, пропадает стандартная постраничная пагинация default, при следующем нажатии на кнопку повторно начинают грузятся ресурсы и так происходит до бесконечности, можно нажимать и они будут подгружаться, долго капался и предполагаю что в данном случае так и должно быть, так как класс disabled к кнопке не применяется, поэтому будет постоянная подгрузка при нажатии, правильно я понимаю?