Pagination

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

Example Usage

HTML

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

JavaScript

// 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