PaginatorJS

A lightweight, dependency-free pagination library written in vanilla javascript.

• Fully customisable via CSS
• Allows for truncation of links
• Custom events
• AJAX support

Demo | Changelog

Note

PaginatorJS is currently in a pre-release state so is not yet suitable for production so use with care. The API will be in constant flux until v1.0.0 is released so check back for any changes.

Install

bower

bower install js-paginator

npm

npm install js-paginator

Browser

Grab the files from the CDN and include them in your project:

<link href="https://unpkg.com/js-paginator@latest/paginator.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/js-paginator@latest/paginator.min.js" type="text/javascript"></script>

You can replace latest with the required release number if needed.

Initialisation

You can instantiate PaginatorJS by passing a reference to the container that the pager will be rendered to as the first parameter of the constructor as either a DOM node reference or a CSS3 selector string:

new Paginator(document.getElementById('pager'));

// or

new Paginator('#pager');

PaginatorJS also accepts an object as a second parameter of the constructor for user defined config:

new Paginator('#pager', {
    offset: 3,
    startPage: 10,
    hideDisabled: false,
    ...
});

Options

limit

Type: Integer

Default: 0

Sets the max number of links visible before truncation kicks in. Defaults to 0 (disabled)

offset

Type: Integer

Default: 2

Set the number of links either side of the active page link. The algorithm keeps the collection tidy by keeping the number of visible links the same when changing pages.

startPage

Type: Integer

Default: 1

Set to start page.

hideDisabled

Type: Boolean

Default: true

Automatically hide the directional buttons when not needed.

prevNext`

Type: Boolean

Default: true

Show the previous / next page buttons.

firstLast`

Type: Boolean

Default: true

Show the skip to first / last page buttons.

prevText

Type: String

Default: ‹

Set the content of the previous page button.

nextText

Type: String

Default: ›

Set the content of the next page button.

firstText

Type: String

Default: «

Set the content of the skip to first page button.

lastText

Type: String

Default: »

Set the content of the skip to last page button.

ellipsisText

Type: String

Default: …

Set the content of the ellipsis buttons.

hashString

Type: String

Default: #

Set the href property of the anchor buttons.

ajax

Type: Object

Default: undefined

ajax: {
	// The URL to the data source
	url: "url/to/data",

	// The page number is used with this param, e.g. url/to/data.php?page=3
	param: "page",

	// Custom params to send with the request
	data: {
		prop1: value1,
		prop2: value2,
		...
	},
	before: function() {
		// do something before the fetch() request
		// e.g. add a loading indicator
	},
	success: function(data) {
		// do something with the returned data
		// e.g. insert the loaded data into the document
	}
}

Load remote data when switching pages.

Public Methods

render()

/**
 * @param  {Number} 	count   Number of links to render
 */
render(count)

Render the pager. Takes an optional integer for quickly setting the number of links.

page()

/**
 * @param  {Number} 	num   The page number
 */
page(num)

Go to the defined page.

To Do

• Add touch / mobile support

Copyright © 2017 Karl Saunders | MIT license