Paginating HubDB

[Woodsy]

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

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

[psdtohubspot]

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

<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

 

[psdtohubspot]

Hi @Woodsy 

Just following up with my solution 🙂 

[Woodsy]

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.

[psdtohubspot]

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

[Woodsy]

Thanks, here's the url to the cloned page:
 https://www-channelmarketplace-com.sandbox.hs-sites.com/resources-test

[psdtohubspot]

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
https://knowledge.hubspot.com/cos-general/how-do-i-select-which-version-of-jquery-is-included-across...

I made codepen as a working example for you

Look here : https://codepen.io/ajitiosys/pen/MWaaBVq

Hope this works for you, 
If not let me know, please.

Thanks!
Ajit

[Woodsy]

Hi, the pagination works 

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.

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

[psdtohubspot · Accepted solution]

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





Here is the modified JavaScript for you Just Copy and Paste

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 

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

Let me know if any questions

Happy to help! Have a nice weekend 🙂

Thanks! 
Ajit Kumar
Any question email me on support@psdtohubspot.com
or Visit: www.psdtohubspot.com