pagination
This article is a stub. You can help the IndieWeb wiki by expanding it.
pagination is a UI pattern for navigation across (typically chronologically) sequential pages that show one or more posts such as permalink post pages, archives, search results, and lists of tagged posts.
How to Markup
Use rel="prev" and rel="next" for your pagination links that drop the user to the previous/next page:
<a href="/pages/1" rel="prev">Previous page</a> <a href="/pages/3" rel="next">Next page</a>
IndieWeb Examples
Date Based Pagination
- Aaron Parecki uses date-based pagination on aaronparecki.com. This means each page's URL is based off of the published date of the top post on the page, so this URL will always show the same set of posts, even as new posts are added. The pages in this way become permalinks, rather than dynamically changing.
- Kartik Prabhu uses date-based pagination on kartikprabhu.com. Articles are paginated by year whereas more-frequent Notes by month.
APIs
Slack
https://api.slack.com/docs/pagination
Slack uses a cursor-based pagination mechanism. An API call that returns a subset of a list of items will also return a cursor string which can be used to retrieve the next page of results. The cursor string is opaque to the client, and only has significance to the server.
- Paginated methods accept limit and cursor parameters.
- Paginated requests include a top-level response_metadata object including a next_cursor when additional results can be retrieved.
- Present the cursor parameter on subsequent requests to navigate the collection.
- An empty, null, or non-existent next_cursor indicates no further results.
https://developers.facebook.com/docs/graph-api/using-graph-api/#paging
Facebook supports multiple pagination mechanisms, but encourages the use of cursor-based pagination. Facebook returns two cursors, "after" and "before" to traverse both directions in a list.
The "before" cursor points to the start of the page of data. The "after" cursor points to the end of the page of data. To request the previous or next page of data, you can pass these strings in the "before" or "after" query string parameter of the API request.
MediaWiki
MediaWiki's web interface for contributions, recent changes, etc. use query params with:
- offset=YYYYMMDDHHMMSS and
- limit=n
e.g.:
MediaWiki's API for recent changes uses start/end timestamp-based parameters, where each parameter name starts with the prefix for the method group, e.g. "rcend" for "recent changes end". There is an additional parameter to indicate whether to return results sorted by
- rcdir = older or newer
- rcstart=YYYYMMDDHHMMSS
- rcend=YYYYMMDDHHMMSS
- https://www.mediawiki.org/wiki/API:RecentChanges#Parameters
The Mediawiki API uses cursor-style pagination:
Google Web Search
Google's web search uses query params for paginating search results with:
- start=n
e.g.:
https://developer.twitter.com/en/docs/tweets/search/api-reference/get-search-tweets
Most of Twitter's APIs for returning tweets use a paging mechanism built around their use of always-increasing numeric tweet IDs. Their IDs are based on the timestamp rather than being sequential, but are guaranteed to be sorted by the time the tweet was created.
Paging in the Twitter API involves using either the since_id
or max_id
parameters to return tweets newer or older than the specified tweet respectively.
Twitter also has a section of their documentation about their cursor-based API.
https://developer.twitter.com/en/docs/basics/cursoring
API responses include next_cursor
and previous_cursor
, and will return "0" if there are no more results.
Twitter Ads API
https://developer.twitter.com/en/docs/ads/general/guides/pagination
The Twitter Ads API uses cursor-based pagination using the cursor
and count
parameters. Traversing
If a response has more than
count
entities, these endpoints will now return the firstcount
entities and anext_cursor
key in the response JSON.
If less than
count
entities are returned in the current page of the result set, thenext_cursor
value will be null.
Sessions
IndieWebCamp sessions that discussed pagination: