just-my-pagination

Just My Pagination

A simple pagination module that returns HTML pagination links for your front-end projects.
Pagination links are returned as /pageUri/pageNumber/.
By default Just My Paginatuon supports Google Material Icons for navigation arrows. If you want to use them don't forget to include in your pages the relative icon font and CSS.

Installation

$ npm install just-my-pagination

Example

This server side code:

var options = {
   pName: 'example', /*Page path*/
   total: 500, /*Total number of results*/
   page: 1, /*Actual page number*/
   query: req.query, /* Query String*/
   limit: 20, /* Results per page*/
}

pagination = require('just-my-pagination').getPagination(options);

Returns client side:

<div id="pagination">
   <span>
      <a href="/example/1/?order=date&sort=desc"><i class="material-icons">first_page</i></a>
   </span>
   <span>
      <a href="/example/3/?order=date&sort=desc"><i class="material-icons">chevron_left</i></a>
   </span>
   <a href="/example/1/?order=date&sort=desc">1</a>
   <a href="/example/2/?order=date&sort=desc">2</a>
   <a href="/example/3/?order=date&sort=desc">3</a>
   <strong>4</strong>
   <a href="/example/5/?order=date&sort=desc">5</a>
   <a href="/example/6/?order=date&sort=desc">6</a>
   <a href="/example/7/?order=date&sort=desc">7</a>
   <span>
      <a href="/example/5/?order=date&sort=desc"><i class="material-icons">chevron_right</i></a>
   </span>
   <span>
      <a href="/example/25/?order=date&sort=desc"><i class="material-icons">last_page</i></a>
   </span>
</div>

Options

Prop	Description	Default
pName	Absolute path of the page where you want to use JMP.	None
total	Total number of results showed per page (required to calculate how many page there is).	None
limit	How many results you show per page (required to calculate how many page there is).	None
page	Actual page number. As you can see in above example it's wrapped in a strong tag.	None
query	URL query string to pass throug pages.	None
pagID	(Optional) HTML ID property name of pagination block.	pagination
firstPage	(Optional) HTML of first page link.	<i class="material-icons">first_page</i>
prevPage	(Optional) HTML of previous page link.	<i class="material-icons">chevron_left</i>
nextPage	(Optional) HTML of next page link.	<i class="material-icons">chevron_left</i>
lastPage	(Optional) HTML of last page link.	<i class="material-icons">last_page</i>
range	(Optional) Number of links before and after actual page number.	3