Pagination

Pagination will render pagination with bootstrap classes. The el must be a ul.

Example Usage

<ul class="pagination-test"></ul>

// Pull in the library
const UI = require('jibe-juice');

// Instantiate a component, pass the selector of the container to insert component into and the opts
const pagination = new UI.Pagination('.pagination-test', {
  cssStyle: 'pagination',
  edges: 0,
  hrefTextPrefix: '#?page=',
  itemsOnPage: 10,
  nextText: '<span class="icon icon-arrow_forward icon-arrow"></span>',
  onPageClick(pageNumber, event) {
    alert('Page number: ' + pageNumber);
  },
  prevText: '<span class="icon icon-arrow_back icon-arrow"></span>'
});

// Render the DOM for the Pagination component
pagination.render();

params

Name	Type	Default	Description
el	string	undefined	A string of the selector for the element to put the component in
opts	object	{}	A catch all for various options. See the opts table below for options specific to this component.

opts

Name	Type	Default	Description
currentPage	number	`1`	The page we are currently on
edges	number	`0`	How many page numbers are visible at the beginning and ending of pagination
hrefTextPrefix	string	`'#page-'`	A string to prefix to the front of all hrefs
items	number	`100`	The total number of items in the list
itemsOnPage	number	`10`	The number of items to display per page
nextText	string	`'Next'`	The text to display in the next button
onPageClick	function	`undefined`	A function to call when the page is changed
prevText	string	`'Prev'`	The text to display in the previous button