Pagination skip page numbers when there are multiple list on the same page

[dshyamala]

I am using MixItUp v3.2.2 and MixItUp Pagination v3.3.0

There can be more than one lists on the page and is dynamic, There is a unique id for the container of each list. Instantiation of mixit up is done as below where containerEl is the unique id. There were some issues with sorting and filtering with multiple instances of list, which was resolved by giving a unique id to the container of the list and the scope as 'local'. But pagination still have issues.

Pagination shows correctly, but when you click on prev and next links, it skips the page numbers and goes to a random number. Say for ex: if you are on page1, next may take you to 3 or 4. This happens only when there is more than one list on the same page.

var mixer = mixitup(containerEl, { controls: { scope: 'local', toggleLogic: 'and' }, selectors: { target: '.feed1' }, pagination: { limit: 6 }, templates: {

                    pagerPrev: '<button type="button" class="${classNames}" data-page="prev" data-mixitup-control>&laquo;</button>',
                    pagerNext: '<button type="button" class="${classNames}" data-page="next" data-mixitup-control>&raquo;</button>'


                },
                load: {
                    page: 1,
                    sort: activeSort,
                    filter: activeFilters
                }
            });

Let me know if there is an issue with the way it is implemented. Is there a config setting that is missed?

[patrickkunka]

Hi @dshyamala - do your pagination controls exist within the locally scoped containers of each mixitup instance?

Would it be possible to share a link?

[dshyamala]

Hi Patrick, Sorry, I missed the notification from your reply. This content is not there in production to share. Pagination controls exist within the locally scoped container. Deepa

[patrickkunka]

I'm afraid there's not much I can do without a link to a reproduction of the issue. If you're able to send me a link privately, or just a copy of your code (HTML and CSS), you can email me at the email address on your purchase receipt and I'll see if I can help.

[dshyamala]

Thank you. Let me get the details and send it over to you.