Pure Javascript pagination logic without UI component
npm install pagination-logic
var pagination = require('pagination-logic');
/*
Provide a pageObject
(total -- Number of items that will be paginated
single -- Number of items per page
pageSize -- Number of pageItem that will be shown
currentPage -- Number of the page you want to get
pageLinkRule -- a funtion you link to the page you want, param is pageNumber
)
*/
var paginationResult = pagination(pageObject)
Name | Description |
---|---|
pages | A list about the elements showed in current page, each elements contains {number, link, isActive} |
pageCount | total page number |
currentPage | the currently active page |
hasPrevious | whether the current page has previous page |
hasNext | whether the current page has next page |
pageSize | Number of elements showing in the current page |
previousPage | the previous page object which contains {number, link, isActive} |
nextPage | the next page object which contains {number, link, isActive} |
firstPage | the first page object which contains {number, link, isEllipsis}. ps: isEllipsis means whether you need '......', like 1...5,6,7,8...100 |
lastPage | the final page object which contains {number, link, isEllipsis}. ps: isEllipsis means whether you need '......', like 1...5,6,7,8...100 |
###Example
const test = require('ava');
const logicPaginate = require('../src/pagination-logic');
test('middle', function(t) {
const input = {
total: 50,
single:6,
pageSize:4,
currentPage: 6,
pageLinkRule: (pageNumber) => {
return `/page/${pageNumber}`;
}
};
const expectedOutput = {
pages: [
{
number: 4,
link: '/page/4',
isActive: false,
},
{
number: 5,
link: '/page/5',
isActive: false,
},
{
number: 6,
link: '/page/6',
isActive: true,
},
{
number: 7,
link: '/page/7',
isActive: false,
}
],
pageCount: 9,
currentPage: 6,
hasPrevious: true,
hasNext: true,
previousPage: {
number: 5,
link: '/page/5',
isActive: false,
},
nextPage: {
number: 7,
link: '/page/7',
isActive: false,
},
pageSize: 4,
firstPage:{
number:1,
link: '/page/1',
isEllipsis: true
},
lastPage:{
number:9,
link: '/page/9',
isEllipsis: true
},
};
t.deepEqual(logicPaginate(input), expectedOutput)
});