Hide pagination when filtered list is empty

Attributes
1

Hello! :wave:

Is there a native solution within Finsweet Attributes to hide CMS Load pagination when the resulting list from activating CMS Filters yields no results. I’ve got the proper empty attributions marked on the text you see here, but the page number indicator persists. Can probably write some JS to solve, but didn’t want to recreate the wheel if there’s already a solution that I’m simply overlooking.

Screenshot 2023-06-08 at 8.50.39 PM
Screenshot 2023-06-08 at 8.50.39 PM2182×378 7.51 KB

2

Hello @travis, unfortunately, this is not native to the attribute. I would recommend you solve it using custom Js and if you don’t mind, please do share the script incase anyone else is looking for such a solution

3

Found this post while looking for a solution and I came up with this script – obviously you’ll need to replace the class names with your own for this to work:

$(document).ready(function() {
    // Function to check the visibility of .blog-filters-empty-state and toggle .blog-list-pagination
    function togglePagination() {
        if ($('.blog-filters-empty-state').is(':visible')) {
            $('.blog-list-pagination').hide();
        } else {
            $('.blog-list-pagination').show();
        }
    }

    // Run the function initially
    togglePagination();

    // Setup an observer to watch for changes in the .blog-filters-empty-state element
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.attributeName === "class" || mutation.attributeName === "style") {
                togglePagination();
            }
        });
    });

    // Start observing the .blog-filters-empty-state element for attribute changes
    observer.observe(document.querySelector('.blog-filters-empty-state'), {
        attributes: true //configure it to listen to attribute changes
    });
});
4

Thank you @austin for sharing a solution! :muscle: