An open API service indexing awesome lists of open source software.

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.

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}}
```