Pagination within Tabs

On my main blog page, I have tabs set up that I use as filters for different categories of our blog and a collection list that is filtered to that category with pagination on each one if needed.

I just noticed that if I am on the ALL tab and paginate over to the second or third page then decide to narrow down to a different category it stays on whatever page I was on for the ALL tab.

So say i went ahead on the ALL tab to the third page of results, then clicked on Hiring then clicked next to take me to the second page of results for Hiring, it takes me to the third page of results for ALL.

Has anyone else noticed this or figured out how to fix this issue?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@sarahdarr Ive never seen filtering done this way. So basically you have a Tab system where the tabs are the filters but you then have separate collection lists on each Tab element!

The reason you are seeing the ALL Tab on the 2nd or 3rd page, is because you are not actually filtering the collection but using the tabs to go to separate filtered out collection items.

To truly see the refresh you would use the main blog page as a featured blog listing and thing have a collections template as your filtering. Here is a video of one I created for a site I recently built so you see what I mean.

Thanks for your suggestion I will look at this tonight and see if its a possibility for us.

1 Like

My original plan was to use a tab system like @sarahdarr but I quickly realized the same issues she had with pagination. @QA_Brandon is this possible to do without navigating away from the page?

I recorded a quick video to explain what I’m trying to do:

I want to show a limited number of collection items in a section of the page, filter them based on a category, then have each selected category paginate based on the number of items in the chosen category.

@tarahoover, you can do this by using Tabs as your main filtered sections at the top and then add a collection into each tab with those categories filtered and then add an All one as well.

Its the only way I know to keep it on the same page without being rerouted to the Categories page.

Or why not design these pages to be used in a collections page. Once they are built there, its not really moving them to the categories page but rather into a CMS Template page, so that type of filtering can be done.

Hope that helps? @tarahoover you can always email me directly too!

Hello @tarahoover

I think that your best option here is MixItUp, I’m currently working on an extension of the tutorial that Sabanna created for the MixItUp integration that includes precisely this option of adding categories dynamically and the possibility of adding more than one, unfortunately I don’t have it ready just yet because I’m working on it, but definitely take a look at that option if your main goal is to keep the user in the same page.

1 Like

Thanks Aaron, I appreciate your input! I figured that even if I got the pagination feature to work, multiple categories would be a problem. MixItUp looks promising…I’ll have to check it out more. I’ll be looking for your extension too!

1 Like

I have implemented a tab system with the new pagination feature just like @tarahoover has explained above, and it seems to be working, at least in the Designer. I have a page of resources (one dynamic content collection) that my client wants filtered by 4 categories (tabs), and under each category they want to show only 12 dynamic content items at a time. Pagination allows them to add up to hundreds of additional items, creating a new “page” within each category tab for every 12 items.

My problem is that when published, there is a weird bug where the pages within tabs are not functioning properly. I figured out that has to do with whatever tab is set as the “active tab” when I’m in the Designer. So for example, say “Tab 1” is set as the active tab in the Designer. On the published site, if I go to tab 3 and click the more/next pagination button, this should take me to the second page of items within that tab (as it does in the Designer). But it actually shows the first page of tab 1, the “active tab.” Clicking one of the other tab menu buttons and back to tab 3 “refreshes” it, so that the proper page shows. The same thing happens based on whatever tab is set as the “active tab,” even if that is “none” (shows a blank page when I click the more pagination button).

image

Tab 3 on published site:

After clicking more/next pagination button on Tab 3, shows first page of Tab 1:

Clicking away from and back to Tab 3 fixes:

@aaronocampo Any idea on what might be causing this and how to fix? I’m also using the pjax “seamless pagination” script (Seamless pagination with "pjax"), but this doesn’t seem to make a difference either way. Mixitup looks like it would have been an ideal solution but alas not really a viable option at this point.

Edit: I should say it’s not exactly like the examples above, as I’m not looking to filter by all/specific categories; just using pagination within tabs.

Read Only Link (page in question is /youth-resources/relationships)
https://preview.webflow.com/preview/million-little?utm_source=million-little&preview=4709a7bfba39eb74b62d2ac60bdafd37&mode=preview&pageId=5c93feb3770f511a258ea838

3 Likes

Hello Webflow community! I also have the same issue now, when I want to paginate items in Tab 2 or Tab 3, it refreshes the page and goes back to Tab 1 and makes it active for no reason. I see that pagination on Tab 2 was made, but to see it I have to press Tab 2 again, after Tab 1. It happens in published version, but in Designer Preview everything is OK.

If someone had solved this problem, I will appreciate your help!

This is still an issue.

Is there another way to create tabs with filters and pagination that you can deep link to?

i.e. mysite.com/listings/all
mysite.com/listings/tab2?page=2

1 Like

I am having exactly this same issue – trying to use pagination within tabs (sorting the same list different ways) takes you back to page 1 of the first or active tab, though if you click back on the correct tab is has advanced as expected. I haven’t seen a specific fix or workaround — obviously this technique is itself a workaround for the inability to provide users with a sorting function. Open to any ideas/solutions!

Had the same issue and a fix. This code will use local storage to save the last known tab(even after the refresh that comes with pagination). This will save the tab even if you leave the page and come back.

the code should be a simple cut and paste into your page /body code area.

<script type="text/javascript">
   
    $(document).ready(function () {

    function activate(tab) {
        // switch all tabs off
        $(".w--current").removeClass(" w--current");

        // switch this tab on
        tab.addClass("w--current");
}
    if (localStorage) { // let's not crash if some user has IE7
        var index = parseInt(localStorage['tab'] || '0');
        activate($('.w-tab-link').eq(index));
    }

    // When a link is clicked
    $(".w-tab-link").click(function () {
        if (localStorage) localStorage['tab'] = $(this).index();
        activate($(this));
    });

});
</script>
2 Likes

Thank you @RussT, that worked for me! Genius!

I only have one problem: On the live website, every time I click on the next/previous button the whole page refreshes. This doesn’t happen in the Designer. Do you know how to only make the current tab refresh? Thank you!!!

This is my live website: https://www.vnvjewels.com/gioielli
This is my read-only link: https://preview.webflow.com/preview/v-n-v-sculpted-jewels?utm_medium=preview_link&utm_source=designer&utm_content=v-n-v-sculpted-jewels&preview=3893ea82fc83e38ce4d23463f8665aa4&pageId=5f2980d01c8447d4ddc69ec5&mode=preview

Thank you for the fix, it solved my issue! :smiley:

1 Like