Using animation filters for pagination. How to set up animation correctly?

Question

css

Essence of the question: there is a page with a lot of products. There is also a filter menu that works on the Mixitup plugin. Since there are a lot of products, I divided them using pagination into pages, the number of which is created automatically. The problem is that the hidden part of the content doesn't work when filtered because it has display: none. How to make it so that when you click on various filter options, the filter still works and the content is sorted. Here is the JS code that is responsible for the automatic creation of pagination. If necessary, I can attach an example of an HTML page. Thanks

$(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});
    });

Answer 1

let countOfElements = $(".element").length;
let maxCountOfElements = 16; // максимальное кол-во элементов на одной типа "странице"

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