PaginatorJS
A lightweight, dependency-free pagination library written in vanilla javascript.
- Fully customisable via CSS
- Allows for truncation of links
- Custom events
- AJAX support
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:
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:
document; // or '#pager';
PaginatorJS also accepts an object as a second parameter of the constructor for user defined config:
'#pager' offset: 3 startPage: 10 hideDisabled: false ...;
Options
limit
Integer
Type: 0
Default: Sets the max number of links visible before truncation kicks in. Defaults to 0 (disabled)
offset
Integer
Type: 2
Default: 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
Integer
Type: 1
Default: Set to start page.
hideDisabled
Boolean
Type: true
Default: Automatically hide the directional buttons when not needed.
prevNext`
Boolean
Type: true
Default: Show the previous / next page buttons.
firstLast`
Boolean
Type: true
Default: Show the skip to first / last page buttons.
prevText
String
Type: ‹
Default: Set the content of the previous page button.
nextText
String
Type: ›
Default: Set the content of the next page button.
firstText
String
Type: «
Default: Set the content of the skip to first page button.
lastText
String
Type: »
Default: Set the content of the skip to last page button.
ellipsisText
String
Type: …
Default: Set the content of the ellipsis buttons.
hashString
String
Type: #
Default: Set the href property of the anchor buttons.
ajax
Object
Type: undefined
Default: 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 ... { // do something before the fetch() request // e.g. add a loading indicator } { // 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 */
Render the pager. Takes an optional integer for quickly setting the number of links.
page()
/** * @param */
Go to the defined page.
To Do
- Add touch / mobile support
Copyright © 2017 Karl Saunders | MIT license