ab-pagination
v1.1.5
Published
Create pagination items model
Downloads
12
Maintainers
Readme
Pagination
Create pagination items model
Quickly create pagination items via vanilla javascript and no dependency required.
Usage
import createPagination from 'ab-pagination';
createPagination will return an array of pagination items and each item is an object with type and page property.
/*
createPagination(current, limit, total, [visibleNeighbors = 2])
*/
const items = createPagination(2, 5, 27);
// [{type: "prev", page: 1}, {type: "anchor", page: 1}, {type: "anchor", page: 2}, {type: "anchor", page: 3}, {type: "anchor", page: 4}, {type: "gap"}, {type: "last", page: 6}, {type: "next", page: 3}] (8)
Item Type
Item type could be one of this below:
- prev
- first
- anchor
- last
- next
- gap
Render Pagination
function renderPagination(items)
{
let pagination = '<ul>';
items.forEach(item => {
pagination += '<li>';
switch(item.type)
{
case 'gap':
pagination += '<i>...</i>';
break;
case 'prev':
case 'next':
pagination += '<a href="?page=' + item.page + '">' + item.type + '</a>';
break;
case 'anchor':
case 'first':
case 'last':
default:
pagination += '<a href="?page=' + item.page + '">' + item.page + '</a>';
break;
}
pagination += '</li>';
});
return pagination;
}
const items = createPagination(2, 5, 27);
document.querySelector('.pagination').innerHTML = renderPagination(items);