cives
May 1, 2020, 6:57pm
1
Hi everyone — I’m currently using hubDB and dynamic pages to create a video listing and post page. I’ve followed a few other tutorials trying to add pagination to my template but haven’t had much luck. I’m hoping to display 6 posts per page and utilize the pagination code that is already in the template:
The listing page markup starts after
{% elif dynamic_page_hubdb_table_id %}
Live link:
http://foundation-nhada-com.sandbox.hs-sites.com/success-stories
Template code:
<!--
templateType: page
isAvailableForNewContent: true
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ content.html_title }}</title>
<meta name="description" content="{{ content.meta_description }}"> {{ standard_header_includes }}
</head>
{% include "/foundation/header.html" %}
<body class="home page-template" itemscope itemtype="https://schema.org/WebPage">
<main class="editor-content clearfix u-relative" role="main" itemscope itemprop="mainContentOfPage" itemtype="https://schema.org/WebPageElement">
{% if dynamic_page_hubdb_row %}
<div class="o-layout-row pt-20 mpb-20 pb-4">
<img style="top:-580px; left: -330px;" data-depth='-0.60' data-type="parallax" class="u-parallax-element" src="/img/nh-squares.png" />
<div class="o-container-wide">
<div class="grid-x">
<div class="cell medium-8 large-9">
<div class="grid-x">
<div class="cell medium-8">
<span class="c-success-title">SUCCESS STORIES • {{ dynamic_page_hubdb_row.video_title }}</span>
<h2 class="mb-10">{{ dynamic_page_hubdb_row.video_title }}
</h2>
</div>
</div>
<span class="u-black mb-4 u-inline-block">Tags:</span>
<div class="grid-x">
<div class="cell medium-9 pb-10">
{% set rows = hubdb_table_rows(2620640) %}
<ul class="c-pill-button-list c-pill-button-list--blue">
{% for row in rows %}
<li>{% for tag in row.tag %}{{ tag.name }}{% endfor %}</li>
{% endfor %}
</ul>
</div>
{% set rows = hubdb_table_rows(2620280) %}
<li>
<button type="button" data-filter="all">All</button>
</li>
{% for row in rows %}
<li>{% for tag in row.event_type %}
<button type="button" data-filter=".{{ tag.name }}"> {{ tag.name }} {% endfor %}</button>
</li>
{% endfor %}
<div class="cell medium-3 pb-10 u-text-right">
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 c-social-share">
<span class="share-icon"><i class="fas fa-share-alt"></i></span>
<div class="c-social-share-networks">
<a class="a2a_button_facebook"><i class="fab fa-facebook-f"></i></a>
<a class="a2a_button_linkedin"><i class="fab fa-linkedin-in"></i></a>
<a class="a2a_button_twitter"><i class="fab fa-twitter"></i></a>
<a class="a2a_button_email"><i class="far fa-envelope"></i></a>
</div>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
</div>
</div>
<div class="grid-x">
<div class="cell">
<div class="o-embed-responsive">
<iframe height="600px" src="https://www.youtube-nocookie.com/embed/06QsACEkLeI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /layout-row-->
<div class="up-next">
<div class="up-next-header"><span>Up Next</span></div>
<div class="up-next-content">
<h5 class="u-ttu ">Popular</h5>
<div class="up-next-post">
<h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
<p>Dan Enxing</p>
<span class="up-next-meta">02 Feb 2020</span>
</div>
<div class="up-next-post">
<h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
<p>Dan Enxing</p>
<span class="up-next-meta">02 Feb 2020</span>
</div>
<div class="up-next-post">
<h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
<p>Dan Enxing</p>
<span class="up-next-meta">02 Feb 2020</span>
</div>
</div>
</div>
</main>
<!-- /editor-content -->
{% elif dynamic_page_hubdb_table_id %} {% set rows = hubdb_table_rows(2620640) %} {% module "module_1588274701186129" path="/foundation/dist/modules/Image Hero Alternate", label="Image Hero Alternate" %}
<!-- /.c-hero -->
<div class="o-layout-row pt-20 mpb-20 pb-4">
<div class="o-container-wide">
{% module "module_158834811832843" path="/foundation/dist/modules/Multi-color Section Header Centered", label="Multi-color Section Header Centered" %}
<hr class="mb-8">
<div>
<h3>New & Noteworthy</h3>
<div class="grid-x c-stories-grid">
{% for row in hubdb_table_rows(2620640) %}
<div class="c-stories-grid-item">
<div style="background-image:url('{{ row.video_thumbnail.url }}')">
<span class="c-stories-grid-item-play "><i class="far fa-play-circle"></i></span>
<!-- <span class="u-pinned-icon"><i class="fas fa-thumbtack"></i></span> -->
<a href="{{ request.path }}/{{ row.hs_path }}"></a>
<div class="c-stories-grid-item-content">
<h6>{{ row.video_title }}</h6>
<hr>
<div class="grid-x">
<span class="cell medium-8">{{ row.location }}</span>
<span class="cell medium-4 u-medium-text-right">{{ row.start_date|datetimeformat('%B %e, %Y') }}</span>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<!-- /layout-row-->
<div class="o-layout-row pt-20 mpb-20 pb-4">
<div class="o-container-wide">
<div class="c-hr-tab c-hr-tab--left">
<div class="c-pagination c-pagination--orange">
<a href="" class="next-posts-link">Next <span><i class="fas fa-arrow-circle-right"></i></span></a>
</div>
<div class="c-drop-down-list">
<div class="c-hr-tab-orange dropDownList">Tags <span><i class="fas fa-arrow-down"></i></span></div>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</div>
<hr class="mb-16" />
</div>
<div class="grid-x">
<div class="cell medium-4">
<h2 class="u-styled-heading--no-underline u-styled-heading">Share Your <span>Story</span></h2>
<p>My education at Lakes Region Community College was a great jumpstart to my career. Shortly after completing my co-op at Quirk GMC, I was hired as a full time technician making over $55,000 a year.</p>
<a class="c-btn-call-out c-btn-call-out--orange mt-4 mb-6" href="#">CALL TO ACTION</a>
</div>
<div class="cell medium-4 medium-offset-4">
<h4 class="u-inline-block mb-10">Trending <span class="u-orange u-inline-block"><i class="fas fa-chart-line"></i></span></h4>
<ul class="c-thumbnail-link-list">
<li>
<span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
<div class="ml-6">
<a href="#">
<h5 class="mb-2">David Lilly</h5>
<p>Portsmouth High School</p>
</a>
</div>
</li>
<li>
<span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
<div class="ml-6">
<a href="#">
<h5 class="mb-2">David Lilly</h5>
<p>Portsmouth High School</p>
</a>
</div>
</li>
<li>
<span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
<div class="ml-6">
<a href="#">
<h5 class="mb-2">David Lilly</h5>
<p>Portsmouth High School</p>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
{% endif %}
</main>
<!-- /editor-content -->
<!-- /footer -->
{% include "/foundation/footer.html" %}
<!-- /modal-navigation -->
{{ standard_footer_includes }}
</body>
</html>
Hi @cives https://community.hubspot.com/t5/CMS-Development/Paginating-HubDB/m-p/332429#M16190
cives
May 1, 2020, 7:43pm
3
Hi Ajit, thanks for that. It looks law raw html/css/js how does this work within the CMS? How does the markup look with hubL… Am I missing something?
@cives
cives
May 1, 2020, 8:51pm
5
http://foundation-nhada-com.sandbox.hs-sites.com/success-stories
Is that what you are looking for? The 6th box shows what a dynamic link will look like. Thank you,
cives
May 4, 2020, 1:27pm
6
Do you need anything else?
@cives
Hi @cives
<!--
templateType: page
isAvailableForNewContent: true
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ content.html_title }}</title>
<meta name="description" content="{{ content.meta_description }}"> {{ standard_header_includes }}
</head>
{% include "/foundation/header.html" %}
<body class="home page-template" itemscope itemtype="https://schema.org/WebPage">
<main class="editor-content clearfix u-relative" role="main" itemscope itemprop="mainContentOfPage" itemtype="https://schema.org/WebPageElement">
{% if dynamic_page_hubdb_row %}
<div class="o-layout-row pt-20 mpb-20 pb-4">
<img style="top:-580px; left: -330px;" data-depth='-0.60' data-type="parallax" class="u-parallax-element" src="/img/nh-squares.png" />
<div class="o-container-wide">
<div class="grid-x">
<div class="cell medium-8 large-9">
<div class="grid-x">
<div class="cell medium-8">
<span class="c-success-title">SUCCESS STORIES • {{ dynamic_page_hubdb_row.video_title }}</span>
<h2 class="mb-10">{{ dynamic_page_hubdb_row.video_title }}
</h2>
</div>
</div>
<span class="u-black mb-4 u-inline-block">Tags:</span>
<div class="grid-x">
<div class="cell medium-9 pb-10">
{% set rows = hubdb_table_rows(2620640) %}
<ul class="c-pill-button-list c-pill-button-list--blue">
{% for row in rows %}
<li>{% for tag in row.tag %}{{ tag.name }}{% endfor %}</li>
{% endfor %}
</ul>
</div>
{% set rows = hubdb_table_rows(2620280) %}
<li>
<button type="button" data-filter="all">All</button>
</li>
{% for row in rows %}
<li>{% for tag in row.event_type %}
<button type="button" data-filter=".{{ tag.name }}"> {{ tag.name }} {% endfor %}</button>
</li>
{% endfor %}
<div class="cell medium-3 pb-10 u-text-right">
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 c-social-share">
<span class="share-icon"><i class="fas fa-share-alt"></i></span>
<div class="c-social-share-networks">
<a class="a2a_button_facebook"><i class="fab fa-facebook-f"></i></a>
<a class="a2a_button_linkedin"><i class="fab fa-linkedin-in"></i></a>
<a class="a2a_button_twitter"><i class="fab fa-twitter"></i></a>
<a class="a2a_button_email"><i class="far fa-envelope"></i></a>
</div>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
</div>
</div>
<div class="grid-x">
<div class="cell">
<div class="o-embed-responsive">
<iframe height="600px" src="https://www.youtube-nocookie.com/embed/06QsACEkLeI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /layout-row-->
<div class="up-next">
<div class="up-next-header"><span>Up Next</span></div>
<div class="up-next-content">
<h5 class="u-ttu ">Popular</h5>
<div class="up-next-post">
<h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
<p>Dan Enxing</p>
<span class="up-next-meta">02 Feb 2020</span>
</div>
<div class="up-next-post">
<h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
<p>Dan Enxing</p>
<span class="up-next-meta">02 Feb 2020</span>
</div>
<div class="up-next-post">
<h6>NHADA Foundation joins Volvo Car USA at Exeter SST</h6>
<p>Dan Enxing</p>
<span class="up-next-meta">02 Feb 2020</span>
</div>
</div>
</div>
</main>
<!-- /editor-content -->
{% elif dynamic_page_hubdb_table_id %} {% set rows = hubdb_table_rows(2620640) %} {% module "module_1588274701186129" path="/foundation/dist/modules/Image Hero Alternate", label="Image Hero Alternate" %}
<!-- /.c-hero -->
<div class="o-layout-row pt-20 mpb-20 pb-4">
<div class="o-container-wide">
{% module "module_158834811832843" path="/foundation/dist/modules/Multi-color Section Header Centered", label="Multi-color Section Header Centered" %}
<hr class="mb-8">
<div>
<h3>New & Noteworthy</h3>
<div id="c-stories-grid-listing">
<div class="grid-x c-stories-grid list">
{% for row in hubdb_table_rows(2620640) %}
<div class="c-stories-grid-item">
<div style="background-image:url('{{ row.video_thumbnail.url }}')">
<span class="c-stories-grid-item-play "><i class="far fa-play-circle"></i></span>
<!-- <span class="u-pinned-icon"><i class="fas fa-thumbtack"></i></span> -->
<a href="{{ request.path }}/{{ row.hs_path }}"></a>
<div class="c-stories-grid-item-content">
<h6>{{ row.video_title }}</h6>
<hr>
<div class="grid-x">
<span class="cell medium-8">{{ row.location }}</span>
<span class="cell medium-4 u-medium-text-right">{{ row.start_date|datetimeformat('%B %e, %Y') }}</span>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="pagination-wrap flex">
<ul class="pagination-layout"></ul>
</div>
</div>
</div>
</div>
</div>
<!-- /layout-row-->
<div class="o-layout-row pt-20 mpb-20 pb-4">
<div class="o-container-wide">
<div class="c-hr-tab c-hr-tab--left">
<div class="c-pagination c-pagination--orange">
<a href="" class="next-posts-link">Next <span><i class="fas fa-arrow-circle-right"></i></span></a>
</div>
<div class="c-drop-down-list">
<div class="c-hr-tab-orange dropDownList">Tags <span><i class="fas fa-arrow-down"></i></span></div>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</div>
<hr class="mb-16" />
</div>
<div class="grid-x">
<div class="cell medium-4">
<h2 class="u-styled-heading--no-underline u-styled-heading">Share Your <span>Story</span></h2>
<p>My education at Lakes Region Community College was a great jumpstart to my career. Shortly after completing my co-op at Quirk GMC, I was hired as a full time technician making over $55,000 a year.</p>
<a class="c-btn-call-out c-btn-call-out--orange mt-4 mb-6" href="#">CALL TO ACTION</a>
</div>
<div class="cell medium-4 medium-offset-4">
<h4 class="u-inline-block mb-10">Trending <span class="u-orange u-inline-block"><i class="fas fa-chart-line"></i></span></h4>
<ul class="c-thumbnail-link-list">
<li>
<span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
<div class="ml-6">
<a href="#">
<h5 class="mb-2">David Lilly</h5>
<p>Portsmouth High School</p>
</a>
</div>
</li>
<li>
<span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
<div class="ml-6">
<a href="#">
<h5 class="mb-2">David Lilly</h5>
<p>Portsmouth High School</p>
</a>
</div>
</li>
<li>
<span><a href="#"><img src="img/small-thumb.png" alt=""></a></span>
<div class="ml-6">
<a href="#">
<h5 class="mb-2">David Lilly</h5>
<p>Portsmouth High School</p>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
{% endif %}
<script type="text/javascript">
$(document).ready(function(){
var perPage = 3;
new List("c-stories-grid-listing", {
valueNames: ["c-stories-grid-item"],
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");
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.3.0/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js"></script>
</main>
<!-- /editor-content -->
<!-- /footer -->
{% include "/foundation/footer.html" %}
<!-- /modal-navigation -->
{{ standard_footer_includes }}
</body>
</html>
Please add this style as well to your stylesheet
ul.pagination-layout {
display: flex;
justify-content: center;
align-items: center;
}
ul.pagination-layout li {
margin: 0px 10px;
}
ul.pagination-layout li a {
padding: 5px 15px;
display: block;
border: 1px solid #000;
color: #000;
}
Hope this will work 100% for you Just Copy & Paste
Please Accept this Solution to Help Community Thanks! Ajit support@psdtohubspot.com