generic-paginate

A simple Javascript function for calculating pagination data which can be easily integrated into any view-layer

Usage

npm i generic-paginate -S

this 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 }}">&laquo;</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 }}">&raquo;</a>
    </li>
</ul>
<span>Showing page: {{ pagination.currentPage}}/{{pagination.totalPages}} </span>
<span>Total items: {{ pagination.totalItems}}</span>