pagination

From IndieWeb


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

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.

Facebook

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


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

Twitter

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 first count entities and a next_cursor key in the response JSON.

If less than count entities are returned in the current page of the result set, the next_cursor value will be null.

Sessions

IndieWebCamp sessions that discussed pagination:

See Also