Задать вопрос
@konohovec

Использование анимации фильтров при пагинации. Как настроить правильно анимацию?

Суть вопроса: есть страница, где множество товаров. Там же есть меню фильтров, которое работает на плагине Mixitup. Поскольку товаров очень много, то разделил их при помощи пагинации на страницы, количество которых создаётся автоматически. Проблема в том, что скрытая часть контента не работает при фильтрации, потому что у неё стоит display: none. Как сделать так, чтоб при нажатии на различные параметры фильтров, всё же работал фильтр и контент сортировался. Привожу код JS, который отвечает за автоматическое создание пагинации. Если надо будет, могу приложить пример HTML странички. Спасибо
$(function($){
$.fn.extend({ 
    MyPagination: function(options) {
        var defaults = {
            height: 4260,
            fadeSpeed: 400
        };
        var options = $.extend(defaults, options);

        // Создаем ссылку на объект
        var objContent = $(this);

        // Внутренние переменные
        var fullPages = new Array();
        var subPages = new Array();
        var height = 0;
        var lastPage = 1;
        var paginatePages;

        // Функция инициализации
        init = function() {
            objContent.children().each(function(i){
                if (height + this.clientHeight > options.height) {
                    fullPages.push(subPages);
                    subPages = new Array();
                    height = 0;
                }

                height += this.clientHeight;
                subPages.push(this);
            });

            if (height > 0) {
                fullPages.push(subPages);
            }

            // Оборачиваем каждую полную страницу
            $(fullPages).wrap("<div class='page'></div>");

            // Скрываем все обернутые страницы
            objContent.children().hide();

            // Создаем коллекцию для навигации
            paginatePages = objContent.children();

            // Показываем первую страницу
            showPage(lastPage);

            // Выводим элементы управления
            showPagination($(paginatePages).length);
        };

        // Функция обновления счетчика
        updateCounter = function(i) {
            $('#page_number').html(i);
        };

        // Функция вывода страницы
        showPage = function(page) {
            i = page - 1; 
            if (paginatePages[i]) {

                // Скрываем старую страницу, показываем новую
                $(paginatePages[lastPage]).fadeOut(options.fadeSpeed);
                lastPage = i;
                $(paginatePages[lastPage]).fadeIn(options.fadeSpeed);

                // и обновлем счетчик
                updateCounter(page);
            }
        };

        // Функция вывода навигации (выводим номера страниц)
        showPagination = function(numPages) {
            var pagins = '';
            for (var i = 1; i <= numPages; i++) {
                pagins += '<li><a href="#" onclick="showPage(' + i + '); return false;">' + i + '</a></li>';
            }
            $('.pagination li:first-child').after(pagins);
        };

        // Выполняем инициализацию
        init();

        // Привязываем два события - нажатие на кнопке "Предыдущая страница"
        $('.pagination #prev').click(function() {
            showPage(lastPage);
        });
        // и "Следующая страница"
        $('.pagination #next').click(function() {
            showPage(lastPage+2);
        });

    }
});
});

    // Инициализация 
    $(function() {
        $('.container').MyPagination({height: 4260, fadeSpeed: 400});
    });
  • Вопрос задан
  • 148 просмотров
Подписаться 1 Средний 4 комментария
Пригласить эксперта
Ответы на вопрос 1
duboloms
@duboloms
Люблю есть дубы с кетчупом. Веб-разработчик.
let countOfElements = $(".element").length;
let maxCountOfElements = 16; // максимальное кол-во элементов на одной типа "странице"

if(countOfElements  > maxCountOfElements ){
  // твой код, который перемещает элемент, на следующую так сказать "страничку"
  // а также, чтобы взять все элементы, после первых 16 элементов (это те элементы, которые надо 
 // переместить на след страницу)
 // что то вроде этого:
 // for(let i = maxCountOfElements; i < maxCountOfElements * 2){
 //  $(".element").eq(i); // элементы, которые должны быть на второй странице
 // }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Rocket Смоленск
от 80 000 до 130 000 ₽
div. Ставрополь
от 40 000 до 90 000 ₽
Wanted. Санкт-Петербург
До 220 000 ₽