Pagination with UI-Router and WP-API

February 22nd, 2017

I added pagination to this site’s headless theme. Its and Angular client for a WordPress API.

The key to this is knowing what Angular’s ui-router can do. This post by Aviv Ben-Yosef was very helpful: Simple pagination and URL params with ui-router. It explains how to set up routes with ‘squashed’ parameters, and make simple pagination functions in your controller.

Another helpful find was in Kadam White’s wpapi utility, which does the actual interaction with my WordPress JSON API. If you go the the link above, and scroll way down, you get to the header “Using Pagination Headers”. MM, that sounds useful! It turns out that every request for a collection made with wpapi contains a property called _paging, and this has useful metadata, like the number of total pages, the number of records that match the request, etc.

If you want to see how I put all this together, you can go to the repo topheavy angular.

The biggest item on the ToDo list for this project is adding comment functionality. When I have that done, I’ll make Cherrytree the default app for Topheavypilesofbooks, for a cool headless theme.

Leave a Reply

Your email address will not be published. Required fields are marked *