Pagination display changes by ellipsis

sarchlab · Jun 4, 2024 · c564200 · c564200
1 parent a4fa21f
commit c564200
Showing 1 changed file with 40 additions and 20 deletions.
diff --git a/daisen/static/src/dashboard.ts b/daisen/static/src/dashboard.ts
@@ -418,12 +418,6 @@ class Dashboard {
  // this._pageBtnContainer.appendChild(pageInfo);
 
  this._addPageButtons(ul);
- this._updatePageInfo(pageInfo);
- }
-
- _updatePageInfo(pageInfo: HTMLDivElement) {
- const numPages = Math.ceil(this._filteredNames.length / (this._numRow * this._numCol));
- pageInfo.innerHTML = `Page ${this._currPage} of ${numPages - 1}`;
  }
 
  _addPageButtons(ul: HTMLUListElement) {
@@ -438,27 +432,53 @@ class Dashboard {
 
  this._addPrevPageButton(ul, this._currPage);
 
- let offset = -2;
- if (this._currPage <= 1) {
- offset = -this._currPage;
- }
- if (this._currPage == numPages - 2) {
- offset = -3;
+ this._addNumPageButton(ul, 0);
+
+ if (this._currPage > 2) {
+ this._addEllipsis(ul);
  }
- if (this._currPage == numPages - 1) {
- offset = -4;
+
+ for (let i = Math.max(1, this._currPage - 1); i <= Math.min(numPages - 2, this._currPage + 1); i++) {
+ this._addNumPageButton(ul, i);
  }
 
- for (let i = 0; i < 5; i++) {
- const pageNum = this._currPage + i + offset;
- if (pageNum < 0 || pageNum >= numPages) {
- continue;
- }
+ if (this._currPage < numPages - 3) {
+ this._addEllipsis(ul);
+ }
 
- this._addNumPageButton(ul, pageNum);
+ if (numPages > 1) {
+ this._addNumPageButton(ul, numPages - 1);
  }
 
  this._addNextPageButton(ul, this._currPage, numPages);
+ // let offset = -2;
+ // if (this._currPage <= 1) {
+ // offset = -this._currPage;
+ // }
+ // if (this._currPage == numPages - 2) {
+ // offset = -3;
+ // }
+ // if (this._currPage == numPages - 1) {
+ // offset = -4;
+ // }
+
+ // for (let i = 0; i < 5; i++) {
+ // const pageNum = this._currPage + i + offset;
+ // if (pageNum < 0 || pageNum >= numPages) {
+ // continue;
+ // }
+
+ // this._addNumPageButton(ul, pageNum);
+ // }
+
+ // this._addNextPageButton(ul, this._currPage, numPages);
+ }
+
+ _addEllipsis(ul: HTMLUListElement) {
+ const li = document.createElement("li");
+ li.classList.add("page-item", "disabled");
+ li.innerHTML = `<a class="page-link">...</a>`;
+ ul.appendChild(li);
  }
 
  _showNoComponentInfo() {