# Paginating HubDB

**URL:** <https://community.hubspot.com/t/paginating-hubdb/20043>\
**Category:** CMS Development\
**Tags:** hubdb\
**Created:** [April 14, 2020, 2:57pm UTC](https://community.hubspot.com/t/paginating-hubdb/20043 "2020-04-14T14:57:46Z")\
**Posts on this page:** 1\
**Showing post:** 9

<div class="post-metadata">

**Author:** ![psdtohubspot](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/psdtohubspot/32/70262_2.png) [@psdtohubspot](https://community.hubspot.com/u/psdtohubspot)\
**Post date:** [April 17, 2020, 9:40pm UTC](https://community.hubspot.com/t/paginating-hubdb/20043/9 "2020-04-17T21:40:36Z")

</div>

Hi @Woodsy  
Finally, I got a solution for your question check code below  
Please look here I added a code for you [https://codepen.io/ajitiosys/pen/MWaaBVq](https://codepen.io/ajitiosys/pen/MWaaBVq)

 ![pagination help.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/b/0b1a57924de4bd2436d95a6f665b892ff7ab905c.png)

Here is the modified JavaScript for you Just Copy and Paste

```auto
var perPage = 6;

new List("resource-listings", {
 valueNames: ["resource-container"],
 page: perPage,
 plugins: [
 // can not make left and right work on List.js 1.5.0, so I use 1.3.0 instead, which requires List.pagination.js plugin
 ListPagination({
 paginationClass: "pagination-layout",
 left: 2,
 right: 2
 })
 ]
}).on("updated", function(list) {
 var isFirst = list.i == 1;
 var isLast = list.i > list.matchingItems.length - list.page;

 // make the Prev and Nex buttons disabled on first and last pages accordingly
 $(".pagination-prev.disabled, .pagination-next.disabled").removeClass(
 "disabled"
 );
 if (isFirst) {
 $(".pagination-prev").addClass("disabled");
 }
 if (isLast) {
 $(".pagination-next").addClass("disabled");
 }

 // hide pagination if there one or less pages to show
 if (list.matchingItems.length <= perPage) {
 $(".pagination-wrap").hide();
 } else {
 $(".pagination-wrap").show();
 }
});

$(".pagination-next").click(function() {
 $(".pagination-layout .active")
 .next()
 .trigger("click");
});
$(".pagination-prev").click(function() {
 $(".pagination-layout .active")
 .prev()
 .trigger("click");
});

```

Don’t forget to add Library for updates

```auto
https://cdnjs.cloudflare.com/ajax/libs/list.js/1.3.0/list.min.js

https://cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js

```

 ![Screenshot_2.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/a/a17c0246503bda47d58e4c0a50cd189b5b35dd2f.png)

Let me know if any questions  
Happy to help! Have a nice weekend 🙂  
Thanks!  
Ajit Kumar  
Any question email me on [support@psdtohubspot.com](mailto:support@psdtohubspot.com)  
or Visit: [www.psdtohubspot.com](http://www.psdtohubspot.com)

---

_[View the full topic](https://community.hubspot.com/t/paginating-hubdb/20043)._