# 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:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Woodsy](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/woodsy/32/63860_2.png) [@Woodsy](https://community.hubspot.com/u/Woodsy)\
**Post date:** [April 14, 2020, 2:57pm UTC](https://community.hubspot.com/t/paginating-hubdb/20043/1 "2020-04-14T14:57:46Z")

</div>

Hi, I’m looking to try and paginate my resource page. I’m trying to show 12 thumbnails per page with a next, back and number of pages underneath. Here is a link to the page and the code behind the module which also includes a dropdown filter that I would like to keep working. If the resources are filtered and more than 12 come back from the query these would be paginated.

[https://www-channelmarketplace-com.sandbox.hs-sites.com/resources](https://www-channelmarketplace-com.sandbox.hs-sites.com/resources)

```auto
<div id=resources>

<!-- FILTER -->

 <div class="resource-filter">
 <form id="form_id" method="get">

 <div>
 <h4>Filter by content type: </h4>
 <select name="type" form="form_id" onChange="this.form.submit()">
 <option value="show-all">Show All</option>
 {% set types = hubdb_table_column(2101318, "content_type").options %}
 {% for choice in types %}
 {% set type_list = type_list~choice.id|list%}
 {% if choice.id == request.query_dict.type%}
 <option selected="selected" value="{{ choice.id }}" onclick="resourceFilter()">{{ choice.name }}</option>
 {% else %}
 <option value="{{ choice.id }}">{{ choice.name }}</option>
 {% endif %}
 {% endfor %}
 </select>
 </div>

 </form>
 </div>

 <!-- sets the different query parameters using submitted input for hubdb query -->

{% set queryparam = "&orderBy=resource_order"~"&resource_order__gt=0" %}
{% if request.query_dict.type in ["1", "11", "12", "13","15"] %}
 {% set queryparam = queryparam ~ "&content_type="~request.query_dict.type|urlencode %}
{% endif %}
{% if request.query_dict.type == "show-all" %}
 {% set queryparam = queryparam %}
{% endif %}

	<!-- RESOURCE PANELS -->

 {% set table = hubdb_table_rows(2101318, queryparam) %} 

 {% if table == [] %}
 <p class='align-center'>Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
 {% else %}
 {% for row in table %}

 <a href="{{ row["resource_url"] }}" target="_blank"> 
 <div class="resource-container" >
 <div id="resource-listing" >
 <div class="{{ row["type"].name }}">
 <div class=resource-thumbnail>
 <div class=resource-icon><img src="{{ row["resource_icon"].url}}"></div>
 <img src="{{ row["thumbnail"].url}}">
 </div>
 <div class="resource-details">
 <p class="content-type">{{ row["content_type"].name }}</p>
 <h2>{{ row["resource_title"] }}</h2>
 <div class="overview">
 <p>{{ row["overview"] }}</p>
 </div>
 <!--<div class="button"><a href="{{ row["resource_url"] }}">Learn more</a></div>-->
 </div>
 </div> 
 </div>
 </div>
 </a>
 {% endfor %}
 {% endif %}

</div> 

```

Thank you in advance for any help.

---

<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 14, 2020, 5:56pm UTC](https://community.hubspot.com/t/paginating-hubdb/20043/2 "2020-04-14T17:56:45Z")

</div>

Hi @Woodsy

Please review I added few lines of Code using List.js you can easily copy and paste below code it will work  
And Please Add Pagination style it’s just list  
selector **.pagination ul li\>a**

```auto
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script>
$( document ).ready(function() {
var rsList = new List('resource-listings', {
valueNames: ['resource-container'],
page: 12,
pagination: true
});
});

</script>

<div id="resources">

<!-- FILTER -->
<div class="resource-filter">
<form id="form_id" method="get">
<div>
<h4>Filter by content type:</h4>
<select form="form_id" name="type" onchange="this.form.submit()">
<option value="show-all">Show All</option>
{% set types = hubdb_table_column(2101318, "content_type").options %} {% for choice in types %} {% set type_list = type_list~choice.id|list%} {% if choice.id == request.query_dict.type%}
<option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
{% else %}
<option value="{{ choice.id }}">{{ choice.name }}</option>
{% endif %} {% endfor %}</select></div>
</form>
</div>

<!-- sets the different query parameters using submitted input for hubdb query --> 

{% set queryparam = "&orderBy=resource_order"~"&resource_order__gt=0" %}
{% if request.query_dict.type in ["1", "11", "12", "13","15"] %}
 {% set queryparam = queryparam ~ "&content_type="~request.query_dict.type|urlencode %}
{% endif %}
{% if request.query_dict.type == "show-all" %}
 {% set queryparam = queryparam %}
{% endif %}

<!-- RESOURCE PANELS --> 

{% set table = hubdb_table_rows(2101318, queryparam) %} {% if table == [] %}
<p class="align-center">
Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
{% else %}

<div id="resource-listings" class="result-lists">
<ul class="list resource-list">

{% for row in table %}

<li>
<a href="{{ row["resource_url"] }}" target="_blank"> 
 <div class="resource-container" >
 <div id="resource-listing" >
 <div class="{{ row["type"].name }}">
 <div class=resource-thumbnail>
 <div class=resource-icon><img src="{{ row["resource_icon"].url}}"></div>
 <img src="{{ row["thumbnail"].url}}">
 </div>
 <div class="resource-details">
 <p class="content-type">{{ row["content_type"].name }}</p>
 <h2>{{ row["resource_title"] }}</h2>
 <div class="overview">
 <p>{{ row["overview"] }}</p>
 </div>
 <!--<div class="button"><a href="{{ row["resource_url"] }}">Learn more</a></div>-->
 </div>
 </div> 
 </div>
 </div>
 </a>

</li>
{% endfor %}</ul><!-- Show Pagination --><ul class="pagination"></ul>
</div>
{% endif %}</div>

```

Let me know if any questions!  
Happy to Help!  
Thanks!  
Ajit

---

<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 15, 2020, 8:18pm UTC](https://community.hubspot.com/t/paginating-hubdb/20043/3 "2020-04-15T20:18:16Z")

</div>

Hi @Woodsy  
Just following up with my solution 🙂

---

<div class="post-metadata">

**Author:** ![Woodsy](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/woodsy/32/63860_2.png) [@Woodsy](https://community.hubspot.com/u/Woodsy)\
**Post date:** [April 15, 2020, 9:07pm UTC](https://community.hubspot.com/t/paginating-hubdb/20043/4 "2020-04-15T21:07:39Z")

</div>

Hi, thanks for taking a look at my code and posting a suggestion. I’ve added the code but am having trouble making it work. I have attached a screenshot of how it looks. Have I missing something? The page is also showing all the cards rather than just 12 and the pagination controls are not showing.

Would you be able to let me know what I am doing wrong?

Thanks again for taking the time to help.

 ![screen.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/f/faa286d46029fdedeb5ca6c3a170c98610871d7f.jpeg)

---

<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 15, 2020, 9:42pm UTC](https://community.hubspot.com/t/paginating-hubdb/20043/5 "2020-04-15T21:42:23Z")

</div>

No problem, Please clone this page and send me the Cloned URL I will send the code  
That will work.  
If you want me to do this in your portal feel free to assign Design manager access on [support@psdtohubspot.com](mailto:support@psdtohubspot.com)

---

<div class="post-metadata">

**Author:** ![Woodsy](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/woodsy/32/63860_2.png) [@Woodsy](https://community.hubspot.com/u/Woodsy)\
**Post date:** [April 16, 2020, 9:00am UTC](https://community.hubspot.com/t/paginating-hubdb/20043/6 "2020-04-16T09:00:17Z")

</div>

Thanks, here’s the url to the cloned page:  
[https://www-channelmarketplace-com.sandbox.hs-sites.com/resources-test](https://www-channelmarketplace-com.sandbox.hs-sites.com/resources-test)

---

<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 16, 2020, 9:25am UTC](https://community.hubspot.com/t/paginating-hubdb/20043/7 "2020-04-16T09:25:29Z")

</div>

Hi @Woodsy  
Please check my above code I added one line for

`<ul class="pagination"></ul>`

Update Jquery and remove from my code only add a list.js

> **[Include jQuery across pages](https://knowledge.hubspot.com/website-pages/include-jquery-across-your-hubspot-pages)**
>
> Learn how to include and manage jQuery across your HubSpot-hosted pages to ensure compatibility with older modules and scripts.

I made codepen as a working example for you  
Look here : [https://codepen.io/ajitiosys/pen/MWaaBVq](https://codepen.io/ajitiosys/pen/MWaaBVq)  
Hope this works for you,  
If not let me know, please.  
Thanks!  
Ajit

---

<div class="post-metadata">

**Author:** ![Woodsy](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/woodsy/32/63860_2.png) [@Woodsy](https://community.hubspot.com/u/Woodsy)\
**Post date:** [April 17, 2020, 11:13am UTC](https://community.hubspot.com/t/paginating-hubdb/20043/8 "2020-04-17T11:13:25Z")

</div>

Hi, the pagination works  
 ![16x16_smiley-very-happy.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/a/a83ec960612094a57cfb392e21c202c8e77b967c.png)

I have a couple of questions around funtionality and styling. In the screenshot there is I have selected page 4 which adds two lots of three horizontal dots.

 ![screen.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/5/d5c01c667bec8c0025e1643cd59f7516e754077e.jpeg)

Can thes be used to arrow next and back through the pages? Currently they don’t do anything. Also can I add arrow styling similar to the blog page control here: [360insights Ecosystem Orchestration](https://www.webinfinity.com/blog)

Does the list.js have an option to add a goto last/first page option similar to the blog link above?

Thank you for all your support and advice in making this work.

---

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