mirror of
https://github.com/Neetpone/ponepaste.git
synced 2025-03-12 06:30:07 +01:00
Make pagination less weird.
This commit is contained in:
parent
5981f6d914
commit
72747dd992
2 changed files with 11 additions and 7 deletions
|
@ -26,8 +26,8 @@ class SimplePaginator {
|
|||
}
|
||||
|
||||
/* First and last page the main paginator will show */
|
||||
const firstPageShow = (currentPage - firstPage) < numPagesToShow ? firstPage : ((currentPage - numPagesToShow < 0) ? currentPage : currentPage - numPagesToShow);
|
||||
const lastPageShow = (firstPageShow + numPagesToShow) > lastPage ? lastPage : (firstPageShow + numPagesToShow + numPagesToShow);
|
||||
const firstPageShow = (currentPage - numPagesToShow) < firstPage ? firstPage : (currentPage - numPagesToShow);
|
||||
const lastPageShow = (currentPage + numPagesToShow) > lastPage ? lastPage : (currentPage + numPagesToShow);
|
||||
|
||||
/* Whether to show the first and last pages in existence at the ends of the paginator */
|
||||
const showFirstPage = (Math.abs(firstPage - currentPage)) > (numPagesToShow);
|
||||
|
@ -38,13 +38,13 @@ class SimplePaginator {
|
|||
|
||||
/* Previous button */
|
||||
this.element.appendChild(makeEl(
|
||||
`<a class="paginator__button previous ${prevButtonDisabled}" data-page="${currentPage - 1}">Previous</a>`
|
||||
`<button class="paginator__button previous" ${prevButtonDisabled} data-page="${currentPage - 1}">Previous</button>`
|
||||
));
|
||||
|
||||
/* First page button */
|
||||
if (showFirstPage) {
|
||||
this.element.appendChild(makeEl(
|
||||
`<a class="paginator__button" data-page="${firstPage}">${firstPage}</a>`
|
||||
`<button class="paginator__button" data-page="${firstPage}">${firstPage}</button>`
|
||||
));
|
||||
this.element.appendChild(makeEl(`<span class="ellipsis">…</span>`));
|
||||
}
|
||||
|
@ -53,7 +53,7 @@ class SimplePaginator {
|
|||
for (let i = firstPageShow; i <= lastPageShow; i++) {
|
||||
const selected = (i === currentPage ? 'paginator__button--selected' : '');
|
||||
this.element.appendChild(makeEl(
|
||||
`<a class="paginator__button ${selected}" data-page="${i}">${i}</a>`
|
||||
`<button class="paginator__button ${selected}" data-page="${i}">${i}</button>`
|
||||
));
|
||||
}
|
||||
|
||||
|
@ -61,14 +61,14 @@ class SimplePaginator {
|
|||
if (showLastPage) {
|
||||
this.element.appendChild(makeEl(`<span class="ellipsis">…</span>`));
|
||||
this.element.appendChild(makeEl(
|
||||
`<a class="paginator__button" data-page="${lastPage}">${lastPage}</a>`
|
||||
`<button class="paginator__button" data-page="${lastPage}">${lastPage}</button>`
|
||||
));
|
||||
}
|
||||
|
||||
const nextButtonDisabled = currentPage === lastPage ? 'disabled' : ''
|
||||
/* Next button */
|
||||
this.element.appendChild(makeEl(
|
||||
`<a class="paginator__button next ${nextButtonDisabled}" data-page="${currentPage + 1}">Next</a>`
|
||||
`<button class="paginator__button next" ${nextButtonDisabled} data-page="${currentPage + 1}">Next</button>`
|
||||
));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -205,6 +205,10 @@ button.button--no-style {
|
|||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.paginator__button:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.table_filterer {
|
||||
color: #fff;
|
||||
background: #3298dc;
|
||||
|
|
Loading…
Add table
Reference in a new issue