Skip to content

A generic paginate class written in java-script. It computes pagination parameters which can easly used in a template file.

Notifications You must be signed in to change notification settings

harish2704/generic-paginate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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>

About

A generic paginate class written in java-script. It computes pagination parameters which can easly used in a template file.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published