Paginate a NodeList like there's no tomorrow
npm install basicpaginate
Paginate a NodeList like there's no tomorrow.
basicPaginate turns a list of elements into a JS-controlled pagination.
- Demos
- Features
- Requirements
- Setup
- API
- Instance API
| Name | Description | Link |
|:-----------|:------------|:------------|
| Default | Includes most features. | Try it on CodePen |
- Works in all modern browsers and IE11 (with polyfills)
- Supports all types of DOM elements
- Doesn't force you to use specific classes or markup
- CommonJS and AMD support
- Simple JS API
basicPaginate depends on the following browser features and APIs:
- Array.from
- NodeList.prototype.forEach
Some of these APIs are capable of being polyfilled in older browsers. Check the linked resources above to determine if you must polyfill to achieve your desired level of browser support.
We recommend installing basicPaginate using npm or yarn.
``sh`
npm install basicpaginate
`sh`
yarn add basicpaginate
Include the JS file at the end of your body tag…
`html`
…or skip the JS file and use basicPaginate as a module:
`js`
const basicPaginate = require('basicpaginate')
`js`
import * as basicPaginate from 'basicpaginate'
This demo shows how to use basicPaginate to turn a bunch of elements into a paginated list.
`htmlItem 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8
js
// 1) Create a new pagination with the items and show up to 4 elements per page
const instance = basicPaginate.create(document.querySelectorAll('.item'), 4)// 2) Use the
render function to generate the HTML and to render it to the DOM
instance.render((instance) => { const placeholder = document.querySelector('.placeholder')
// 3) Generate the HTML of your pagination
// Note: It doesn't matter how you generate the HTML as basicPaginate works with any structure
placeholder.innerHTML =
// 4) Return the created element so basicPaginate can look for special attributes
// Note: You can also bind the event manually without adding attributes to the elements
return placeholder
})
// 5) Control every aspect of the pagination programmatically
instance.first()
instance.last()
instance.prev()
instance.next()
instance.goto(0)
API
$3
Creates a new basicPaginate instance.
Be sure to assign your instance to a variable. Using your instance, you can…
* …get the current page index.
* …navigate back and forward.
* …goto a specific page.
* …goto a the first or last page.
* …tell basicPaginate to render a HTML pagination.
Example:
js
const instance = basicPaginate.create(document.querySelectorAll('.item'), 4)
`Parameters:
-
{NodeList} Elements that should be part of the pagination.
- elemsPerPage {Number} Number of elements per page.Returns:
-
{Object} The created instance.Instance API
Each basicPaginate instance has a handful of handy functions. Below are all of them along with a short description.
$3
Returns an array in which each item contains the DOM element/node objects of a page.
Example:
`js
const pages = instance.pages()
`Returns:
-
Array in which each item contains the DOM element/node objects of a page.$3
Returns the total number of pages.
Example:
`js
const length = instance.length()
`Returns:
-
Total number of pages.$3
Returns the current page index.
Example:
`js
const current = instance.current()
`Returns:
-
Current page index.$3
Navigates to a specific page.
Example:
`js
instance.goto(0)
`Parameters:
-
{Number} Index of the page to be displayed.$3
Navigates to the first page.
Example:
`js
instance.first()
`$3
Navigates to the last page.
Example:
js
instance.last()
`$3
Navigates to the previous page or to the last page when the current page is already the first one.
Example:
js
instance.prev()
`$3
Navigates to the next page or to the first page when the current page is already the last one.
Example:
js
instance.next()
`$3
basicPaginate doesn't render anything by default. Use this function to build the HTML of your pagination and to render it onto your site.
The render function accepts a function that will called every time the page of the pagination changes. It receives the current instance and allows you to generate the HTML for the pagination. Return the created element or the element containing the generated element and basicPaginate will look for special data attributes to automatically bind events. The supported attributes are
, data-basicpaginate-last, data-basicpaginate-prev, data-basicpaginate-next and data-basicpaginate-goto. Their behaviour is equal to the functions of the instance. You can also skip the attributes or return nothing to handle the event binding on your own.Examples:
`js
instance.render((instance) => { const placeholder = document.querySelector('.placeholder')
// Use the data attributes of basicPaginate to get automatic event binding
placeholder.innerHTML =
// Return the created element so basicPaginate can look for special attributes
return placeholder
})
js
instance.render((instance) => { const placeholder = document.querySelector('.placeholder')
placeholder.innerHTML =
// Handle the event binding on your own
placeholder.querySelector('.pagination__prev').onclick = instance.prev
placeholder.querySelector('.pagination__next').onclick = instance.next
})
js
instance.render((instance) => { const placeholder = document.querySelector('.placeholder')
// Build the HTML of your pagination with document.createElement
const prev = document.createElement('button')
const next = document.createElement('button')
prev.innerText = '←'
next.innerText = '→'
// Handle the event binding on your own
prev.onclick = instance.prev
next.onclick = instance.next
})
``