javascript - How to set pagination of next and previous on filterabale gallery via Jquery

Question

I checked but found no solution for this. I am using isotope filterable gallery wanted some custom pagination like explained below for each gallery filter category.

I want the pagination to be short like image below

currently the code i tried is generating all pages with number like image below

Here is the current code

var itemsPerPageDefault = 6;
    var itemsPerPage = defineItemsPerPage();
    var currentNumberPages = 1;
    var currentPage = 1;
    var currentFilter = '*';
    var filterAtribute = 'data-filter';
    var pageAtribute = 'data-page';
    var pagerClass = 'isotope-pager';

    function changeFilter(selector) {
        $container.isotope({
            filter: selector
        });
    }


    function goToPage(n) {
        currentPage = n;

        var selector = itemSelector;
        selector += (currentFilter != '*') ? '[' + filterAtribute + '="' + currentFilter + '"]' : '';
        selector += '[' + pageAtribute + '="' + currentPage + '"]';

        changeFilter(selector);
    }

    function defineItemsPerPage() {
        var pages = itemsPerPageDefault;

        for (var i = 0; i < responsiveIsotope.length; i++) {
            if (jQuery(window).width() <= responsiveIsotope[i][0]) {
                pages = responsiveIsotope[i][1];
                break;
            }



        }

        return pages;
    }

    function setPagination() {

        var SettingsPagesOnItems = function() {

            var itemsLength = $container.children(itemSelector).length;

            var pages = Math.ceil(itemsLength / itemsPerPage);
            var item = 1;
            var page = 1;
            var selector = itemSelector;
            selector += (currentFilter != '*') ? '[' + filterAtribute + '="' + currentFilter + '"]' : '';

            $container.children(selector).each(function() {
                if (item > itemsPerPage) {
                    page++;
                    item = 1;
                }
                jQuery(this).attr(pageAtribute, page);
                item++;
            });

            currentNumberPages = page;

        }();

        var CreatePagers = function() {

            var $isotopePager = (jQuery('.' + pagerClass).length == 0) ? jQuery('<div class="' + pagerClass + '"></div>') : jQuery('.' + pagerClass);

            $isotopePager.html('');

            for (var i = 0; i < currentNumberPages; i++) {
                var $pager = jQuery('<a href="javascript:void(0);" class="pager" ' + pageAtribute + '="' + (i + 1) + '"></a>');
                $pager.html(i + 1);

                $pager.click(function() {
                    var page = jQuery(this).eq(0).attr(pageAtribute);
                    goToPage(page);
                });

                $pager.appendTo($isotopePager);
            }

            $container.after($isotopePager);

        }();

    }

    setPagination();
    goToPage(1);

    //On change filter set pages again
    jQuery('#big-screen li a').click(function() {
        var filter = jQuery(this).attr(filterAtribute);
        currentFilter = filter;

        setPagination();
        goToPage(1);


    });

    //Event on resize
    jQuery(window).resize(function() {
        itemsPerPage = defineItemsPerPage();
        setPagination();
        goToPage(1);
    });

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

question from:https://stackoverflow.com/questions/65864226/how-to-set-pagination-of-next-and-previous-on-filterabale-gallery-via-jquery

Answer 1

Waitting for answers