Adding pagination to a search bar (Nodejs EJS Express)

Viewed 296

I'm learning web development in particular Nodejs, EJS and JavaScript. I have items I'm calling from a JSON file.

I'm trying to make a search bar that would work with pagination. I want the search bar to find data from the whole file not just the 5 items from pagination.

I have a pagination set so that it shows only 5 items on every page. The current search bar only returns a few results because of the pagination.

I need this for a webpage for Runescape services, its not finished yet. The search bar can be found on www.rsbazar.org/store.ejs?start=0&end=5.

This is my server.js file

        var PORT = process.env.PORT;
    
    if (process.env.NODE_ENV !== "production") {
      require("dotenv").config();
    }
    
    const stripeSecretKey = process.env.STRIPE_SECRET_KEY;
    const stripePublicKey = process.env.STRIPE_PUBLIC_KEY;
    
    const express = require("express");
    const app = express();
    const fs = require("fs");
    const stripe = require("stripe")(stripeSecretKey);
    const port = process.env.PORT || 5000;
    
    app.set("view engine", "ejs");
    app.use(express.json());
    app.use(express.static("public"));
    
    app.get("/store", function (req, res) {
      fs.readFile("items.json", function (error, data) {
        if (error) {
          res.status(500).end();
        } else {
          const paginatedData = {
            music: JSON.parse(data).music.slice(req.query.start, req.query.end),
            length: JSON.parse(data).music.length,
          };
          res.render("store.ejs", {
            stripePublicKey: stripePublicKey,
            items: paginatedData,
          });
        }
      });
    });
app.listen(port, () => console.log("listening on port ${port}"));

this is my store.ejs

    <!-- input tag -->
<input id="searchbar" onkeyup="search_quest()" type="text"
name="search" placeholder="Search quests.." ">
> 
  
    <section class="container content-section">
        <h2 class="section-header">Questing</h2>
        <div class="shop-items" >
            <% items.music.forEach(function(item){ %>
                <div class="shop-item" data-item-id="<%= item.id %>">
                    <span class="shop-item-title"><%= item.name %></span>
                    <img class="shop-item-image" src="Images/<%= item.imgName %>">
                    <div class="shop-item-details">
                        <span class="shop-item-price">$<%= item.price / 100 %></span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
                
            <% }) %>
        </div>

        </section>
        <section class="container content-section">
            <center>
        <div style="justify-content: space-between;">
        <button onclick="backwardQuery()" class="btn btn-primary">
            <<
        </button>
        <button onclick="forwardQuery()" class="btn btn-primary">
            >>    
        </button>    
        </div>
    </center>    
        </section>

and this is my JS

        // PAGINATION:
        let maxLen='<%= items.length %>'
        maxLen=parseInt(maxLen);

   function forwardQuery(){
        let queryParam=new URLSearchParams(window.location.search)
        let start=parseInt(queryParam.get('start'));
        let end=parseInt(queryParam.get('end'));
        start=start+5;
        end=end+5;
        if(start>=0&&end<=maxLen){
        window.location.href=`/store.ejs?start=${start}&end=${end}`
        }
    }
    function backwardQuery(){
        let queryParam=new URLSearchParams(window.location.search)
        let start=parseInt(queryParam.get('start'));
        let end=parseInt(queryParam.get('end'));
        start=start-5;
        end=end-5;
        if(start>=0&&end<=maxLen){
        window.location.href=`/store.ejs?start=${start}&end=${end}`
        }
    }

             // SEARCHBAR:
    function search_quest() { 
        let input = document.getElementById('searchbar').value 
        input=input.toLowerCase(); 
        let x = document.getElementsByClassName('shop-item'); 
          
        for (i = 0; i < x.length; i++) {  
            if (!x[i].innerHTML.toLowerCase().includes(input)) { 
                x[i].style.display="none"; 
            } 
            else { 
                x[i].style.display="list-item";                  
            } 
        } 
    }

and this is part of JSON file

  {
  "music": [
    {
      "id": 1,
      "name": "Animal magnetism",
      "price": 240,
      "imgName": "AM.png"
    },
    {
      "id": 2,
      "name": "Another slice of ham",
      "price": 210,
      "imgName": "ASH.png"
    },
    {
      "id": 3,
      "name": "The Ascent of Arceuus",
      "price": 190,
      "imgName": "AA.png"
    },
    {
      "id": 4,
      "name": "Between a Rock",
      "price": 240,
      "imgName": "Bar.png"
    },

    {
      "id": 5,
      "name": "Big Chompy Bird Hunting",
      "price": 150,
      "imgName": "B.png"
    }
  ]
}
0 Answers
Related