Pagination for a dynamic list

F3Ri0uS · June 19, 2017, 3:17pm

Hello,

I have 2000 items and I would like to make a pagination for this list. How should I do ?

Thanks a lot for your help.

PixelGeek · June 19, 2017, 4:53pm

Admin Update:

The ability to paginate collection lists in Webflow is now live: Paginate Collection Lists | Webflow Features

Here’s how to to paginate collection lists in your Webflow hosted sites. Please feel free to contact us if you have any questions. ➞

F3Ri0uS · June 19, 2017, 5:45pm

Hello @PixelGeek,

Thank you.
So, if I put a dynamic list with 2000 items on the same page, it will take a long time to load … How does this happen on your hosting in this case?

PixelGeek · June 19, 2017, 5:48pm

a workaround could be using dynamic filters.

create a static page
drag in a dynamic list to that page
set the filter to show only X amount of items
set a range of items to load

rinse and repeat for other pages

samliew · June 19, 2017, 11:30pm

Related threads:

https://discourse.webflow.com/search?q=Pagination

F3Ri0uS · June 20, 2017, 7:16am

Manual pagination with 100 items is feasible, but pagination with 2000 items is impossible.

If I put 30 items per page, I will have to create more than 65 statistical pages. The goal of Webflow is to save time and not lose …

samliew · June 20, 2017, 10:09am

You’re not the first one who has this thought.

https://discourse.webflow.com/search?q=pagination%20category%3A21
https://discourse.webflow.com/search?q=pagination%20category%3A28
https://discourse.webflow.com/search?q=pagination%20category%3A8

gruedan · July 5, 2017, 10:37pm

I’ve come up with a solution that doesn’t completely solve your problem, but may be helpful to some other users. It doesn’t help with page load times if you have a ton of posts (like OP’s 2000), but if you have a reasonable number it could still be helpful.

The idea is to hide all posts at first, and use JavaScript to hide and show the posts based on a custom page size. I used the jQuery bootpag plugin (bootpag - dynamic pagination jQuery plugin) to create the pager, and took just the pagination classes from Bootstrap’s CSS so I didn’t have to include the whole library.

Working example at https://www.greatbigdigitalagency.com/blog

The HTML

Add a div element to the page where you want your pager to be. Give it a class (mine is called “blog-pager”).

The CSS

Copy this into the Custom Code section of your Page Settings, in the “Inside tag” box. You can leave out everything below the /* Bootstrap pagination classes isolated */ comment if you’re already using Bootstrap on your site. I added the class “blog-list” to my dynamic type. You’ll have to do the same and change this CSS to match whatever class you give it.

<style type="text/css">
.blog-list {
    display: none;
}

/* Bootstrap pagination classes isolated */

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination > li {
    display: inline;
}

.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #337ab7;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    margin-left: -1px;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    z-index: 2;
    color: #23527c;
    background-color: #eeeeee;
    border-color: #dddddd;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 3;
    color: #ffffff;
    background-color: #337ab7;
    border-color: #337ab7;
    cursor: default;
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #777777;
    background-color: #ffffff;
    border-color: #dddddd;
    cursor: not-allowed;
}

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}
</style>

The Javascript

You can put this in the “Before tag” box in the page settings. Change pageSize to how many posts you want to show per page. You’ll also have to change “blog-list” and “blog-pager” to your own classes. At time of writing, the bootpag plugin is available on cdnjs.cloudflare.com.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootpag/1.0.7/jquery.bootpag.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // set page size
        var pageSize = 5;
        // show first [pageSize] posts
        $(".blog-list").slice(0, pageSize).fadeIn();
        // get total count of posts
        var blogCount = $('.blog-list').length;
        // initialize pager
        $('.blog-pager').bootpag({
            total: Math.ceil(blogCount / pageSize),
            page: 1,
            maxVisible: 10,
            leaps: true,
        })
        //page click action
        $('.blog-pager').on("page", function(event, num) {
            $('.blog-list').hide();
            $('.blog-list').slice(num * pageSize - pageSize, num * pageSize).show();
        });
    });
</script>

And that should do it! Obviously not ideal, and doesn’t address the deeper issue of not having true pagination, but hopefully will help someone out there.

Michael_Messina · October 13, 2017, 2:34pm

I’ve been having to move clients to Wordpress for this exact reason. Webflow is not the ideal platform for clients with massive, constantly updating blogs without a pagination feature.

I would really, really love to use Webflow for all of my web projects, but this is currently a major limitation.

People_Inc · September 7, 2018, 9:18pm

When it can be available its almost one year over?

brjohnson · December 7, 2018, 3:22pm

For those of you watching at home: we are very, very close to a release here. I’ve been playing with pagination all week - and it’s sweet. Thank you all sincerely for your patience

rileyj_s · December 7, 2018, 8:24pm

B R U H

Thomas_92 · December 7, 2018, 11:56pm

oh hype!!

Super excited for this feature, no more hacking it together

RohanGanachari · January 18, 2019, 3:05pm

Hi,

Can we paginate on individual collection pages?

Thanks!

QA_Brandon · January 18, 2019, 6:22pm

Not sure what you mean by your question?

Are you referring to a list of blog posts that you dont want to see more than say 12 collective posts?

Or are you referring to something else?

RohanGanachari · January 21, 2019, 2:59pm

@QA_Brandon Sorry for the confusion.

So as shown in the image below, on top right it says 20 of 25 with option to view either the previous or the next product. This is displayed on the product page.

Can we do the same in webflow?

QA_Brandon · January 22, 2019, 6:54pm

@RohanGanachari, at the moment I do not believe so.

RohanGanachari · January 23, 2019, 9:22am

@QA_Brandon That’s unfortunate. It would have been a neat feature for blog page and/or product pages.

QA_Brandon · February 7, 2019, 12:32am

@RohanGanachari, not sure if you have seen, but page count is now available for pagination feature for blogs and other CMS collection items.

RohanGanachari · February 7, 2019, 8:28am

@QA_Brandon Thank you for letting me know. I’ll check it out!

Topic		Replies	Views
Paginating Dynamic Lists Product feedback	51	11586	February 14, 2017
Pagination in Webflow Product feedback	19	3605	January 10, 2019
Pagination for client with the new Webflow CMS General	3	3613	March 27, 2016
CMS Slider : A solution using pagination Webflow Tips	18	8769	December 7, 2022
Add page number to pagination? CMS	19	5389	March 10, 2024

Pagination for a dynamic list

Admin Update:

Related topics