Hello everyone,
I’ve been trying to figure out how to add the number of pages and the current page to the pagination on the bottom as such
After lot of research and trying out some stuff, i can’t seem to find a way to do it properly.
Anybody got some tips on this ?
hi @Gabin_Burgun webflow support numbers for pagination natively
or you can use this tool
else you can use JS to do that from scratch.
@Stan when writing custom code - how to tap into the collection size, data model (to filter it) etc.?
hi @Tomek_Luzak can you be more specific as I didn’t get your question as I do not understand what you mean by tap into the collection size …
Hey Stan, thanks for following up here.
What I meant is that: if we want to create a custom pagination then we need some information about the current state of the collection (most of all: how many items it has). How do you reference CMS collection from your custom JS code to get this info and to create sub-collections in order to display filtered results (while keeping the pagination in sync).
hi @Tomek_Luzak firstly number of items to be populated to DOM can be set in your collection setting, if no limitation is set all CMS collection items will be populated into DOM. Everything after is just simple JS manipulating DOM.
Writing custom multidimensional filter isn’t too complicated but also not simple to build. I have wrote these filters for me but I have posted FinSweet link as it is easy to use for no coders but I do not use this library I have only tested it and it works great so I can’t help with this library. Its is not possible to describe how to as it is case specific.
Beside standard filtering Array or Objects methods you can look on Web API createDocumentFragment and related documentation if you would like to filter out or let say rebuild DOM elements if this will help with your needs.
Actually the filter I need is simple and one-dimentional. I need to filter blog post by category, so classic.
I tried using mixitup3 for filtering & it works but it will not (quite obviously) affect the state of the Webflow pagination element.
Say I have 100 blog posts and paginate them by 25 per page.
Initially I have 4 pages but when I filter by post category I’m left with say 33 posts, so the pagination should not only go to page 1. but also update the total number of pages (as per filtered collection size).
I know perfectly how to do it in a regular JS web app but my trouble here is - how can I get a hold of the reference to the CMS blog post collection I have in Webflow?
Hi @Tomek_Luzak did you tried use standard JS methods map to loop over collection and filter out only posts with given prop (category) that will return only posts that fulfil condition and then you can have another function that except one argument (total of posts) and will rebuild pagination numbers.
I haven’t because I don’t know how I can grab the collection reference to run the Array methods on?
const filteredCollection = webFlowBlogPosts.filter(post => post.category === varSetByFilterButton);
// where do I get the webFlowBlogPosts from?
Hi @Tomek_Luzak can you send live and read-only links to get an idea how your project is set as it is hard to guess how it is set up. You can create copy of your project without any JS applied so I can inject mine if I will do not see any issues in settings how informations are passed between elements. You can send it via DM
HI have just now browse some old example and I have found one with simple filter but it doesn’t have pagination. I will look on it tomorrow and see what I can come up with.
Ok, so in the end I’ve used
&
and it’s working.
Example of implementation of which you can find here:
This somehow ‘magically’ syncs the pagination with the filters…
Maybe this helps someone struggling like me today…
Thank you so much. The clonable project you attached pointed me to a nice workaround for this issue I’ve been having