npm Paginator

Overview

There is an ongoing debate about whether or not pagination is the right design approach to use when dealing with large amounts of data on a web page, but the appropriateness of pagination seems to hinge on both the content and context of the data. It is generally agreed that e-commerce pages should be paginated, but in other situations it might not be appropriate. Should a designer decide to paginate content, this node.js package allows them to easily split the content into smaller sections, and automatically generates nagivation.

Usage

For example, on the site shown below, Paginator has split a piece of writing into seven pages. The "first" and "prev" buttons are disabled since the first page is currently showing.

Paginator Example
A paginated site, showing automatically-generated navigation

Adding the "storySection" class to a section of HTML will create a new page. For instance, in this demo, each <div> with the class "js-pageSection" would be shown on its own page.

Paginator also adds a location.hash value to the url, so that sections can be linked to directly. For example, "http://www.example.com/test#section2" would link directly to page 2 of the page http://www.example.com/test.

Notes

Whereas on most other projects I have designed and developed with a general, non-technical audience in mind, in this case, I was creating something that other developers would be using in their projects. I spent a great deal of time researching technical documentation and consulting with other, more experienced developers to ensure that the documentation I wrote for Paginator would meet the expectations of node.js developers.

View the Paginator GitHub repo here, and the npm page for Paginator here.