Streaming live at 10am (PST)

Pagination for a dynamic list


#1

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.


How can I create a Load More button?
Pagination workaround - lazy load and infinite load?
#2

Hi @F3Ri0uS At this time we do not have a pagination feature. We are still working on it. You can follow this on our wishlist:

https://wishlist.webflow.com/ideas/DESIGNER-I-8


#3

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?


#4

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


#5

Related threads:

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


#6

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 ...


#7

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

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


#8

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.grueandbleen.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! Obiously not ideal, and doesn't address the deeper issue of not having true pagination, but hopefully will help someone out there.


#9

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.


#10

When it can be available its almost one year over?