0.1.3 • Published 7 years ago
generic-paginate v0.1.3
generic-paginate
A simple Javascript function for calculating pagination data which can be easily integrated into any view-layer
Usage
npm i generic-paginate -Sthis module exports a single function called paginate
paginate(total, skip, limit, opts) ⇒ paginationData
Calculate pagination data using given params
Arguments
| Param | Type | Default | Description |
|---|---|---|---|
| total | Number | Total number of records | |
| skip | Number | Number of records to be skiped. AKA offset | |
| limit | Number | 10 | Number of items per page |
| opts | Object | {} | additional options |
| opts.buttonCount | Number | 5 | length of pagination button list. Eg: < 2, 3, 4, > -> Means buttonCount=3 < 2, 3, 4, 5, 6 > -> Means buttonCount=5 < 2, 3, 4, 5, 6, 7, 9 > -> Means buttonCount=7 |
| opts.activeClass | string | "'active'" | HTML class attribute to be applied for current page button |
| opts.inactiveClass | string | "''" | HTML class attribute to be applied for button other than current page b |
Properties of output paginationData
| Name | Type | Description |
|---|---|---|
| next | Number | undefined | next page number. undefined if there is no next page |
| prev | Number | undefined | previous page number. undefined if there is no previous page |
| currentPage | Number | current page number |
| totalPages | Number | total number of pages |
| totalItems | Number | total number of items |
| limit | Number | items per page. copied from argument |
| skip | Number | no of skipped records. copied from argument |
| buttons | Array.<Object> | array of buttons in the pagination list |
| buttons[].page | Number | page number of button |
| buttons[].class | string | html class of button. current page will have opts.inactiveClass and all others will have opts.activeClass |
Example ( Nodejs )
var Paginate = require('generic-paginate');
// 37 total items,
// 10 items/page,
// skipping first 20 => current page is 3
var paginationData = Paginate( 37, 20, 10 );
console.log( paginationData );
/*
Output will be
{ next: 4,
prev: 2,
currentPage: 3,
buttons:
[ { page: 1, class: 'inactive' },
{ page: 2, class: 'inactive' },
{ page: 3, class: 'active' },
{ page: 4, class: 'inactive' } ],
totalPages: 4,
totalItems: 37,
limit: 10,
skip: 20 }
*/Example ( Browser )
<script src="https://unpkg.com/generic-paginate" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var pagintionData = GenericPaginate( 37, 20, 10 );
console.log( pagintionData );
/*
Output will be
{ next: 4,
prev: 2,
currentPage: 3,
buttons:
[ { page: 1, class: 'inactive' },
{ page: 2, class: 'inactive' },
{ page: 3, class: 'active' },
{ page: 4, class: 'inactive' } ],
totalPages: 4,
totalItems: 37,
limit: 10,
skip: 20 }
*/
</script>A sample AngularJs tempalte will be like this
<ul class="pagination">
<li ng-enable="pagination.prev" >
<a href="/mangoes?page={{ pagination.prev }}">«</a>
</li>
<li ng-repeat="button in pagination.buttons" ng-class="{{ button.class }}">
<a href="/mangoes?page={{ button.page }}">{{ button.page }}</a>
</li>
<li ng-enable="pagination.next">
<a href="/mangoes?page={{ pagination.next }}">»</a>
</li>
</ul>
<span>Showing page: {{ pagination.currentPage}}/{{pagination.totalPages}} </span>
<span>Total items: {{ pagination.totalItems}}</span>