Streaming live at 10am (PST)

Pagination for a dynamic list

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.

1 Like

Admin Update:


The ability to paginate collection lists in Webflow is now live: https://webflow.com/feature/paginate-collection-lists

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


1 Like

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?

a workaround could be using dynamic filters.

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

rinse and repeat for other pages

Related threads:

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

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 …

2 Likes

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

1 Like

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 (http://botmonster.com/jquery-bootpag/) 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.

3 Likes

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.

2 Likes

When it can be available its almost one year over?

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 :pray:

14 Likes

B R U H :star_struck:

1 Like

oh hype!!

Super excited for this feature, no more hacking it together :raised_hands:

Hi,

Can we paginate on individual collection pages?

Thanks!

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?

@WebDev_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?

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

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

1 Like

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

1 Like

@WebDev_Brandon Thank you for letting me know. I’ll check it out! :slight_smile: