https://github.com/harish2704/generic-paginate
A generic paginate class written in java-script. It computes pagination parameters which can easly used in a template file.
https://github.com/harish2704/generic-paginate
calculating-pagination-data javascript paginate paginator
Last synced: 7 months ago
JSON representation
A generic paginate class written in java-script. It computes pagination parameters which can easly used in a template file.
- Host: GitHub
- URL: https://github.com/harish2704/generic-paginate
- Owner: harish2704
- Created: 2014-02-24T11:11:52.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2017-06-20T12:34:14.000Z (over 8 years ago)
- Last Synced: 2025-02-17T20:05:06.352Z (8 months ago)
- Topics: calculating-pagination-data, javascript, paginate, paginator
- Language: JavaScript
- Size: 9.77 KB
- Stars: 1
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 )
```javascript
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 )
```html
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 }
*/
```
##### A sample AngularJs tempalte will be like this
```html
Showing page: {{ pagination.currentPage}}/{{pagination.totalPages}}
Total items: {{ pagination.totalItems}}
```