pagination-ui-less
v0.1.2
Published
A Pagination manager library without UI.
Downloads
5
Readme
Pagination-UI-LESS
How to use
use npm or yarn to install
npm i pagination-ui-less
or
yarn add pagination-ui-less
use CDN include
<script src="https://cdn.jsdelivr.net/npm/pagination-ui-less"></script>
then you can use the following example to create a Pagination manager:
const pagination = paginationUiLess({ pagesLength: 1, currentPage: 1, onChange: () => {} })
types
export declare type TCreatePaginationProps = {
pagesLength: number;
onChange: (pages: TPages) => void;
currentPage?: number;
};
export declare type TPages = {
currentPage: number;
pages: {
action: string | null;
value: number | string;
isActive?: boolean;
}[];
};
Methods
setPage
(n: number) => TPages;
setPagesLength
(newPagesLength: number, newCurrentPage: number) => TPages
getPages
() => TPages
getCurrentPage
() => number
nextPage
() => TPages
previousPage
() => TPages
firstPage
() => TPages
lastPage
() => TPages
Example
https://github.com/SidStraw/Pagination-UI-LESS/blob/main/example/main.js
import { createPaginationItem } from './module/createElements.js'
async function main() {
const paginationElement = document.querySelector('#pagination')
// declare type TCreatePaginationProps = {
// pagesLength: number;
// onChange: (pages: TPages) => void;
// currentPage?: number;
// };
const pagination = paginationUiLess({
pagesLength: 10,
onChange: updateElements,
})
function updateElements({ currentPage, pages }) {
// declare type TPages = {
// currentPage: number;
// pages: {
// action: string | null;
// value: number | string;
// isActive?: boolean;
// }[];
// };
paginationElement.innerHTML = pages.map(createPaginationItem).join('')
}
paginationElement.addEventListener('click', e => {
const { action, value } = e.target.dataset
const newPage = Number(value)
const currentPage = pagination.getCurrentPage()
if (!action || currentPage === newPage) return
pagination[action](newPage)
})
updateElements(1)
}
main()