|
|
|
@ -10,17 +10,20 @@
|
|
|
|
|
export let pages: number = 0;
|
|
|
|
|
export let total: number = 0;
|
|
|
|
|
export let pageSize: number = 50;
|
|
|
|
|
export let onPageChange = (newPage: number, prevPage: number) =>
|
|
|
|
|
console.log(`${newPage} - ${prevPage}`);
|
|
|
|
|
|
|
|
|
|
$: pageIndex = page + 1;
|
|
|
|
|
$: pageCount = pages === 0 ? 1 : pages;
|
|
|
|
|
$: pageSizeLabel = pageSize + "";
|
|
|
|
|
|
|
|
|
|
const pagerElementsCount = 10;
|
|
|
|
|
let pagesList = [];
|
|
|
|
|
$: {
|
|
|
|
|
pagesList = [];
|
|
|
|
|
for (
|
|
|
|
|
let i = Math.max(page - 5, 0);
|
|
|
|
|
i < Math.min(pages, page + 5);
|
|
|
|
|
let i = Math.max(page - pagerElementsCount, 0);
|
|
|
|
|
i < Math.min(pages, page + pagerElementsCount);
|
|
|
|
|
i++
|
|
|
|
|
) {
|
|
|
|
|
pagesList.push(i);
|
|
|
|
@ -38,21 +41,21 @@
|
|
|
|
|
<p>Page {pageIndex}/{pageCount}</p>
|
|
|
|
|
<div>
|
|
|
|
|
<Pagination size="sm">
|
|
|
|
|
<PaginationItem>
|
|
|
|
|
<PaginationItem disabled={pageIndex === 1}>
|
|
|
|
|
<PaginationLink first href="#" />
|
|
|
|
|
</PaginationItem>
|
|
|
|
|
<PaginationItem>
|
|
|
|
|
<PaginationItem disabled={pageIndex === 1}>
|
|
|
|
|
<PaginationLink previous href="#" />
|
|
|
|
|
</PaginationItem>
|
|
|
|
|
{#each pagesList as p}
|
|
|
|
|
<PaginationItem>
|
|
|
|
|
<PaginationItem active={pageIndex - 1 === p}>
|
|
|
|
|
<PaginationLink href="#">{p + 1}</PaginationLink>
|
|
|
|
|
</PaginationItem>
|
|
|
|
|
{/each}
|
|
|
|
|
<PaginationItem>
|
|
|
|
|
<PaginationItem disabled={pageIndex === pageCount}>
|
|
|
|
|
<PaginationLink next href="#" />
|
|
|
|
|
</PaginationItem>
|
|
|
|
|
<PaginationItem>
|
|
|
|
|
<PaginationItem disabled={pageIndex === pageCount}>
|
|
|
|
|
<PaginationLink last href="#" />
|
|
|
|
|
</PaginationItem>
|
|
|
|
|
</Pagination>
|
|
|
|
|