Adding Pagination to COS Page Template with Javascript

[Kauri]

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

[Jsum]

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

[Kauri]

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

[Jsum]

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

[Kauri]

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!

[heytricia]

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?