Streaming live at 10am (PST)

[TUTORIAL] MixItUp3 - Filtering, Sorting and PAGINATION

Hello my dear friends!

First of all, I want to thank everyone for the feedback to my MixItUp tutorials, tips and tricks! I’m so happy to see that they helped you to create so many great advanced projects! :heart_eyes:

I have got many question about adding a Pagination to those collections that needs to be filtered but are really very big/long.

And while it is, unfortunately, not possible to combine MixItUp filtering with native Webflow Pagination, the MixItUp library has its own extension, that provides such functionality.

55%20PM

Note: Author of the MixItUp library made this functionality as a PAID extension


I put together a step-by-step tutorial about MixitUp Pagination and added it to the site MixItUp tutorial site: http://mixitup-webflow-tutorial.webflow.io/pagination

If you want to check the details, the project itself you can find here:

Best regards,
Anna

10 Likes

Hello Anna,
I am trying to make for my students a webshop for photographers.


I want to have a filtering.
I first tried out without CMS, a second with CMS, but I have a problem : the buttons does not work.
My filtering is ‘no-glasses’ , ‘black-glasses’, ‘green-glasses’, ‘white-glasses’
‘without CMS’: has a problem for the 'blauw: no glasses showing up and dissapear… why?
I used https://getavataaars.com/ for the pictures.
Your name is ‘filter-1’ but why is my ‘no-glasses’ not working?


Please can you have a look to my project
https://karelrosseel-sousletilleul-5362ea.webflow.io/filter-met-cms
my shared project:
https://preview.webflow.com/preview/karelrosseel-fotografie?utm_source=karelrosseel-fotografie&preview=3d28440e8b28b02ced46256bf55d68cb

Thanks
Karel

Hi, @KarelRosseel82!

The problem in your project is in the text that you put into the “category”, it is not matching the data-filter value.

Thanks,
I tried to change it like you asked… but still not sorting in the page with CMS-database


Please can you look again so I know what I did wrong.
Also the non-CMS has a problem : for the bleu icons ‘no-glasses’: they show up but disappear again… why? + why yellow ‘back-glasses’ jumps always first to the middle and afterwards to the top… can the yellow/green/… images filter directly to the top or stay at the middle?

this is not at your example: the div-boxes jump directly to the top, why do you have not my problem…

Thanks to help me
Karel

@KarelRosseel82 it seems you are forgetting to add the dot in the data-filter value.
18%20PM 49%20PM

For the static content (no CMS) you are applying data-filter to the button and div inside the button. You don’t need that. Plus again, forgot the dot

hi Sabanna,
the CMS version is not yet working even if I changed the dot .no-glasses
and the other and even A-Z and Z-A … how?


Thanks to help
Karel

Hey, @KarelRosseel82, I sent you more information in DM

Hi @sabanna

Thanks for some great tutorials!

Is it possible to use pagination together with Multidimensional filtering? Basically so you add pagination to your “Checkbox Multidimensional filtering” example? In your current pagination example it is for example not possible to choose: show T-shirts and Hoody, for Women.

If yes - can you show me how to do it? :slight_smile:

Hope it makes sense!

Thanks
Casper

Hi, @CasperKp!

You can add that pagination to ANY type of filters. Just follow the tutorial for building the multidimensional filtering, then add pagination by following dedicated tutorial.

Cheers,
Anna

Hi @sabanna,

Thanks for the quick reply.

I have added the pagination to the checkbox multifilter and it almost work like I want it.

I have created two simple examples / pages (with pagination and without pagination). I really want the checkbox filter in the “with pagination” page to work like in the “without pagination” page example but I can’t get it to work.

Do you have a solution? :slight_smile:

https://preview.webflow.com/preview/mixitup-filtering-and-pagination?utm_source=mixitup-filtering-and-pagination&preview=2973463a296376dc2ab5712c4c746ffc

https://mixitup-filtering-and-pagination.webflow.io/

Thanks!
Casper

Hi again, @CasperKp!

In the code for the paginated filtering you are “calling” for the filtering function twice, with different parameters:
56%20PM

What you actually need is one call with both parameters together:

00%20PM

Hi @sabanna,

It works!

Thank you for the help! :smiley:

Best,
Casper

1 Like

nice solution… I try to also make it [TUTORIAL] MixItUp3 - Filtering, Sorting and PAGINATION

Hey Casper, your idea of filter is cool… please can you share again your preview with me… and give me the code to make the same…

thanks
Karel
I need it for this project: https://preview.webflow.com/preview/computationeel-denken?utm_source=computationeel-denken&preview=6503f3f78238b03828b2ca80f5dea688
https://computationeel-denken.webflow.io/alle-lesopdrachten

Hi @KarelRosseel82… Sorry for the very late reply… Here is the preview if you still need it :slight_smile: https://preview.webflow.com/preview/mixitup-filtering-and-pagination?utm_medium=preview_link&utm_source=designer&utm_content=mixitup-filtering-and-pagination&preview=2973463a296376dc2ab5712c4c746ffc&mode=preview

Hi @sabanna,

I hope you can help me again :slight_smile:

The infinite scroll in my project works but the collection list only shows 40 items per page. I want it show infinite items on just one page (I’m aware of the 100 items limit). Do you have a solution? :slight_smile:

Here is my project: https://preview.webflow.com/preview/restaurantjob?utm_medium=preview_link&utm_source=designer&utm_content=restaurantjob&preview=0aff5884355a070abf43221782b4252f&pageId=5cbd9253ef4522372891a067&mode=preview

I created a separate topic where I showed a Workaround for Big collections:

Happy Webflowing :heart:

Hi Sabanna, how great there are people like you :guiño:… I followed the mixitup tutorial (http://mixitup-webflow-tutorial.webflow.io/multi-dimensional-filtering-for-cms-content) step by step. Everything is perfect. But I would like to have a search engine. Would it be possible to help me with that? Thank you very much in advance.
link of my website: https://www.microswiss.net/support

hi @Enny_Hidalgo, thanks for your post, I would recommend to create a new forum post about the search. Also Webflow has built in Site search

1 Like

Cool @cyberdave ! I will do so, thank you very much for the recommendation…