made pagination and mostly finalized the searchbox

public/js/searchbox.js

@@ -22,6 +22,9 @@ class PartnerExpoSearch {
       layoutMeta: document.getElementById("pexpo-core-layoutMeta"),
       sortSelect: document.getElementById("pexpo-core-sortSelect"),
       filterApply: document.getElementById("pexpo-core-filterApply"),
+      pageNum: document.getElementById("pexpo-core-page-number"),
+      pagePrev: document.getElementById("pexpo-core-page-prev"),
+      pageNext: document.getElementById("pexpo-core-page-next"),
     };
 
     this.state = {
@@ -34,6 +37,8 @@ class PartnerExpoSearch {
         page: 1,
       },
       activeSortKey: "relevance",
+      total: '',
+      pages: 1,
       results: [],
       layoutQueued: false
     };
@@ -144,6 +149,20 @@ class PartnerExpoSearch {
         this.setDrawerOpen(false);
       }
     });
+
+    this.els.pageNext.addEventListener("click", () => {
+      if (this.state.filters.page < this.state.pages) {
+        this.state.filters.page += 1;
+        this.fetchData();
+      }
+    });
+
+    this.els.pagePrev.addEventListener("click", () => {
+      if (this.state.filters.page > 1) {
+        this.state.filters.page -= 1;
+        this.fetchData();
+      }
+    });
   }
 
   // ---------- Fetch ----------
@@ -156,7 +175,10 @@ class PartnerExpoSearch {
       const response = await fetch(`/wp-json/pexpo/v1/query?${queryString}`);
       const data = await response.json();
 
-      this.state.results = data;
+      this.state.results = data['results'] || [];
+      this.state.total = data['found'] || 0;
+      this.state.pages = data['pages'] || 1;
+      console.log("Fetched data:", data['pages']);
       this.requestLayout();
 
     } catch (error) {
@@ -287,11 +309,27 @@ class PartnerExpoSearch {
 
   applyMasonry() {
     const n = this.state.results.length || 0;
-    this.els.count.textContent = n;
+    const page = this.state.filters.page || 1;
+    const pages = this.state.pages;
+    this.els.count.textContent = this.state.total ? this.state.total : '';
+    this.els.pageNum.textContent = page;
     this.els.masonry.innerHTML = "";
-    
+
+    if (page >= pages) {
+      this.els.pageNext.setAttribute("disabled", "disabled");
+    } else {
+      this.els.pageNext.removeAttribute("disabled");
+    }
+
+    if (page <= 1) {
+      this.els.pagePrev.setAttribute("disabled", "disabled");
+    } else {
+      this.els.pagePrev.removeAttribute("disabled");
+    }
+
     if (n === 0) {
       if(this.els.emptyResult) {
+        this.els.count.textContent = this.state.total ? this.state.total : 0;
         let emptyClone = this.els.emptyResult.cloneNode(true);
         emptyClone.style.display = "block";
         this.els.masonry.appendChild(emptyClone);