Adding Pagination to COS Page Template with Javascript

Highlighted
Occasional Contributor

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

Reply
0 Upvotes
5 Replies 5
Esteemed Advisor

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

- Jonathan Sumner
Reply
0 Upvotes
Occasional Contributor

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

Reply
0 Upvotes
Esteemed Advisor

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

- Jonathan Sumner
Reply
0 Upvotes
Occasional Contributor

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!

Reply
0 Upvotes
Occasional Contributor

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?