add total number of pages in pagination

sarchlab · May 28, 2024 · a4fa21f · a4fa21f
1 parent 674be9a
commit a4fa21f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/daisen/static/package-lock.json b/daisen/static/package-lock.json
diff --git a/daisen/static/package.json b/daisen/static/package.json
@@ -25,7 +25,7 @@
  "@fortawesome/fontawesome-free": "^5.12.1",
  "@types/chroma-js": "^2.0.0",
  "@types/d3": "^5.7.2",
- "bootstrap": "^4.4.1",
+ "bootstrap": "^4.6.2",
  "chroma-js": "^2.0.3",
  "css-loader": "^6.7.3",
  "d3": "^7.8.4",

diff --git a/daisen/static/src/css/app.css b/daisen/static/src/css/app.css
@@ -28,6 +28,17 @@ body {
  display: flex;
 }
 
+.pagination-container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color:#2c7bb6
+}
+
+.page-info {
+ margin-left: 10px;
+}
+
 .row {
  align-items: flex-start;
 }

diff --git a/daisen/static/src/dashboard.ts b/daisen/static/src/dashboard.ts
@@ -400,10 +400,30 @@ class Dashboard {
  ul.classList.add("pagination");
  nav.appendChild(ul);
 
+ const pageInfo = document.createElement("div");
+ pageInfo.classList.add("page-info");
+
+ const paginationContainer = document.createElement("div");
+ paginationContainer.classList.add("pagination-container");
+ paginationContainer.appendChild(nav);
+ paginationContainer.appendChild(pageInfo);
+
  this._pageBtnContainer.innerHTML = "";
- this._pageBtnContainer.appendChild(nav);
+ this._pageBtnContainer.appendChild(paginationContainer);
+ // pageInfo.classList.add("page-info");
+ // pageInfo.style.marginLeft = "10px";
+
+ // this._pageBtnContainer.innerHTML = "";
+ // this._pageBtnContainer.appendChild(nav);
+ // 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) {
@@ -527,6 +547,8 @@ class Dashboard {
 
  this._addPaginationControl();
  this._renderPage();
+ const pageInfo = this._pageBtnContainer.querySelector('.page-info') as HTMLDivElement;
+ this._updatePageInfo(pageInfo);
  }
 
  _renderPage() {
@@ -551,4 +573,4 @@ class Dashboard {
  }
 }
 
-export default Dashboard;
+export default Dashboard;