What are some strategies to enhance the performance of JavaScript pagination to ensure it functions effectively for varying numbers of pages?

Question

What are some strategies to enhance the performance of JavaScript pagination to ensure it functions effectively for varying numbers of pages?

Currently, I am working on building Vanilla Javascript Pagination. I encountered an issue where the pagination seems to work flawlessly only when there are precisely 7 pages. If the page count exceeds or falls below 7, some minor bugs start to surface. I have been struggling to optimize my code to make it flexible and usable for any number of pages. Below is the code snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous" />
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <section class="blog-listing">
      <div class="container">
        <div class="row">
          <div class="col-6">
            <input
              type="search"
              class="inputs"
              id="searcher"
              placeholder="Search" />
            <input type="hidden" name="type" value="BLOG_POST" />
            <input type="hidden" name="type" value="LISTING_PAGE" />
          </div>
          <div class="col-6"></div>
        </div>

        <div class="row" id="blogs"></div>
        <div id="blog-pagination"></div>
        <div id="buttons"></div>
      </div>
    </section>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"></script>
    <script src="./main.js"></script>
  </body>
</html>

CSS

.blog-listing {
  padding: 200px 0px;
}
.blog-listing input {
  background-color: #f3f3f3;
  border-radius: 40.5px;
  width: 100%;
  padding: 20px;
  margin-bottom: 20px;
}
.blog-listing input::-moz-placeholder {
  font-family: "Poppins";
  font-weight: 300;
  font-size: 18px;
  line-height: 44px;
  color: #19212f;
}
.blog-listing input:-ms-input-placeholder {
  font-family: "Poppins";
  font-weight: 300;
  font-size: 18px;
  line-height: 44px;
  color: #19212f;
}
...

JS

let allBlogs = [];
allBlogs.length = 14;

// JavaScript code here...

// End of JavaScript code

https://i.sstatic.net/M3H2N.png

I've been working on optimizing the code for varying numbers of pages, but I'm facing challenges in finding an ideal solution.

javascript html css

Answer 1

Answer №1

When it comes to setting up pagination numbers and links, consider implementing the following approach:

 //Identify the element where page numbers will be displayed
 let paginationElem = document.getElementById("yourPageElementIdHere")

 //Your list of blogs
 let allBlogs = []

 //Calculate the total number of pages needed
 let pagesNeeded = allBlogs.length / <number of entries per-page> //Remember to round the number if necessary

 //Generate a clickable link for each page. Start the loop at 1 to prevent displaying the first page as "0"
 for(i=1; i < pagesNeeded + 1; i++) {
    let pageNum = document.createElement("a")
    pageNum.innerHTML = i
    pageNum.href = "" //your link to the page goes here
    paginationElem.append(pageNum)
 }

If you are wondering how to retrieve and display the relevant articles on each page, you will need to extract the page number clicked - possibly through a search param like (?pageNum=4) in the link. Then, you can create a loop to gather the appropriate articles into an array. The following snippet should help achieve this:

 //Your articles stored in an array
 let allBlogs = []

 let pageNum = //Fetch the value from the search param

 // Array to hold articles to be displayed on the selected page
 let articlesToDisplay = []

 //Set the initial value for the first page
 let firstArticle = 0

 // Determine the starting point for the loop based on the selected page
 if(pageNum != 0) {
     firstArticle = (pageNum - 1) * 10 //or other number of articles per page
 }

 // Iterate through the articles starting from the first one, and add a specified number of articles (10 in this example) to the array
 for(i=firstArticle; i < firstArticle + 10; i++) {
   articlesToDisplay.push(allBlogs[i])
 }

You can then loop through the articlesToDisplay array or generate elements within a final loop to append them to a section within the document.

Answer 2

When it comes to setting up pagination numbers and links, consider implementing the following approach:

 //Identify the element where page numbers will be displayed
 let paginationElem = document.getElementById("yourPageElementIdHere")

 //Your list of blogs
 let allBlogs = []

 //Calculate the total number of pages needed
 let pagesNeeded = allBlogs.length / <number of entries per-page> //Remember to round the number if necessary

 //Generate a clickable link for each page. Start the loop at 1 to prevent displaying the first page as "0"
 for(i=1; i < pagesNeeded + 1; i++) {
    let pageNum = document.createElement("a")
    pageNum.innerHTML = i
    pageNum.href = "" //your link to the page goes here
    paginationElem.append(pageNum)
 }

If you are wondering how to retrieve and display the relevant articles on each page, you will need to extract the page number clicked - possibly through a search param like (?pageNum=4) in the link. Then, you can create a loop to gather the appropriate articles into an array. The following snippet should help achieve this:

 //Your articles stored in an array
 let allBlogs = []

 let pageNum = //Fetch the value from the search param

 // Array to hold articles to be displayed on the selected page
 let articlesToDisplay = []

 //Set the initial value for the first page
 let firstArticle = 0

 // Determine the starting point for the loop based on the selected page
 if(pageNum != 0) {
     firstArticle = (pageNum - 1) * 10 //or other number of articles per page
 }

 // Iterate through the articles starting from the first one, and add a specified number of articles (10 in this example) to the array
 for(i=firstArticle; i < firstArticle + 10; i++) {
   articlesToDisplay.push(allBlogs[i])
 }

You can then loop through the articlesToDisplay array or generate elements within a final loop to append them to a section within the document.

What are some strategies to enhance the performance of JavaScript pagination to ensure it functions effectively for varying numbers of pages?

Answer №1

Similar questions

NodeJS making seven successful Ajax requests

Is it possible to rotate an image with a random angle when hovering in Angular?

Bidirectional updates in AngularJS with CSS styling

Filter a Vue list based on a checkbox that can be either checked or unchecked

Utilizing jQuery for AJAX requests on a timed loop

Getting a product by its slug can be achieved with Next.js 14 and Sanity by utilizing the capabilities

"Rails Ajax spinner functions properly in the development environment, but encounters issues in the

What is the best way to target and style anchor links in CSS that are not empty?

Converting JSON data into an HTML table

How can I trigger a masterpage function from a contentpage in asp.net?

Divide Footer Information into Two Sections: Left and Right

Adding JSON data before the second to last element of an array:

Onload, capture page elements, delete them, and then access the original content

The changes made to the state array in react.js are not reflected in the DOM

Is it a suboptimal method to repeatedly use order.find, collect data, and transmit a substantial data payload to the front end in

Implement dynamic configuration injection by allowing users to specify the name of a configuration file during runtime, instead of having it fixed in the code

Retrieve an item from a MongoDB database using Mongoose

The Americanpurpose1 font family features playful smiley faces when special characters such as parentheses and hashtags are used

Greetings! Unable to retrieve data within the TRY block following the resolution of an error in another function

What is the process of sending a file to a server and storing it in a MySQL database?