We use cookies to make HubSpot's community a better place. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. To learn more, and to see a full list of cookies we use, check out our Cookie Policy (baked goods not included).
May 4, 2017 6:16 PM - edited May 4, 2017 6:16 PM
I'm seeing this on the tutorials but no further information about adding pagination with JS:
"If you wanted to paginate content rendered with a HubL function, you would need to use Javascript to paginate the static set of posts."
As seen here: http://designers.hubspot.com/docs/tutorials/printing-sets-of-blog-posts-on-page-templates
I want this listing to have pages: http://info.logicalposition.com/education-resource-center/ppc-for-beginners
May 5, 2017 12:34 PM
@Kauri This looks like a blog. If you want to paginate a blog you don't really need to go crazy with javascript.
First go to your content settings -> blog settings -> blog in question (drop down)
Then scroll to the settings for limiting the amount of blogs per page. Ensure that you desired limit per page is set.
Then in your blog template just make sure that you have navigation under, above, or around your blog list. This is the hubspot default pagination (found here: http://designers.hubspot.com/docs/hubl/blog-content-markup)
{% if not simple_list_page %} <div class="blog-pagination"> {% if last_page_num %} <a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a> {% endif %} <a class="all-posts-link" href="{{ group.absolute_url }}/all">All posts</a> {% if next_page_num %} <a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next</a> {% endif %} </div> {% endif %}
This goes in your listing markup.
May 5, 2017 12:45 PM
@Jsum this is a page outside of the blog template and can't utilize this function.
The page is printing sets of blog posts on a different page template.
May 5, 2017 12:51 PM
@Kauri why? it looks like a blog, and quacks like a blog, why not make it a blog?
If for what ever reason that's not possible then Yes, js is your only option.
Basically you will have to load all items on the page, then use js to count the number of items, split the items into sets contained separately, then have controls that will move through the containers.
Something like http://flaviusmatis.github.io/simplePagination.js should do it.
May 5, 2017 1:37 PM
We wanted certain blogs printed on the page first, and the page is fetching articles based on multiple topic slugs so we had to make it a COS page instead of a blog. I will try that to see if it works!
Feb 28, 2018 6:30 PM - edited Feb 28, 2018 6:32 PM
I find myself in this same situation. I needed to provide my client with an editable listing page, so couldn't go the traditional blog-template route. Were you able to find a solution for this? I definitely don't want to load all posts and hide a set at at time - over time that would really slow down the page. Any luck on the ajax approach?