Designing a custom pagination system with HTML, CSS, and JavaScript

Pagination is an essential element in web design that allows users to navigate through a large amount of content in a more organized and user-friendly way. While there are many pagination systems available, designing a custom pagination system with HTML, CSS, and JavaScript can offer greater flexibility and control over the design and functionality of your pagination.

In this blog, we will walk through the process of designing a custom pagination system with HTML, CSS, and JavaScript. We will cover the basic structure of pagination, the necessary HTML and CSS code, and how to use JavaScript to add functionality to the pagination system.

Basic Structure of Pagination

Before we dive into the code, let's discuss the basic structure of pagination. Pagination typically consists of a set of links or buttons that allow users to navigate through a list of items or pages. The most common pagination structure consists of a series of numbered links or buttons that correspond to each page in the list. For example, if you have a list of 100 items and you want to display 10 items per page, your pagination would consist of 10 links or buttons, each corresponding to a different page in the list.

In addition to the numbered links or buttons, pagination may also include navigation buttons that allow users to move to the previous or next page in the list. Some pagination systems may also include a "first page" and "last page" button to allow users to quickly jump to the beginning or end of the list.

HTML Code for Pagination

To create a basic pagination system with HTML, we will use an unordered list (<ul>) to contain the links or buttons for each page in the list. Each list item (<li>) will contain a link or button that corresponds to a different page in the list.

Here's an example HTML code for a simple pagination system:

<div class="pagination">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

In this example, we have a pagination container with a class of "pagination". Inside the container, we have an unordered list with five list items, each containing a link with a "#" URL. We will use JavaScript later to update the URLs to correspond to the correct pages in the list.

CSS Code for Pagination

To style our pagination system, we can use CSS to apply styles to the pagination container, the unordered list, and the list items.

Here's an example CSS code for our pagination system:

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination li {
  margin: 0 5px;
}

.pagination a {
  display: block;
  padding: 5px 10px;
  background-color: #f5f5f5;
  color: #333;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.pagination a:hover {
  background-color: #333;
  color: #fff;
}

In this example, we have applied styles to the pagination container to center it on the page and add some margin at the top. We have also applied styles to the unordered list to remove the default list styles and the list items to add some margin between them.

We have also applied styles to the links to add some padding and a background color. We have used a CSS transition to smoothly animate the background color change when the user hovers over a link.

Feel free to customize these styles to match the design of your website or application.

JavaScript Code for Pagination

Now that we have our basic pagination structure and styles, we can use JavaScript to add functionality to the pagination system. Specifically, we need to update the URLs of the links to correspond to the correct pages in the list and add event listeners to the links to handle when a user clicks on them.

Here's an example JavaScript code for our pagination system:

const paginationContainer = document.querySelector('.pagination');
const pages = document.querySelectorAll('.pagination li a');
const itemsPerPage = 10;
const totalItems = 100;

for (let i = 0; i < pages.length; i++) {
  pages[i].href = `#${i + 1}`;
  pages[i].addEventListener('click', (event) => {
    event.preventDefault();
    showPage(i + 1);
  });
}

function showPage(pageNumber) {
  const startIndex = (pageNumber - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const listItems = document.querySelectorAll('.list-item');
  
  for (let i = 0; i < listItems.length; i++) {
    if (i >= startIndex && i < endIndex) {
      listItems[i].style.display = 'block';
    } else {
      listItems[i].style.display = 'none';
    }
  }
}

In this example, we have selected the pagination container and the links inside it using querySelector and querySelectorAll. We have also defined the number of items per page and the total number of items in the list.

We then loop through each link and update its href attribute to correspond to the correct page number. We also add an event listener to each link that calls the showPage function when the user clicks on it.

The showPage function takes a page number as its argument and calculates the starting and ending index of the items to display based on the items per page and the total number of items. It then loops through all the list items and sets their display style to either "block" or "none" depending on whether they should be shown on the current page.

With this JavaScript code, our pagination system now updates the list items based on which page the user clicks on.

Conclusion

Designing a custom pagination system with HTML, CSS, and JavaScript can offer greater flexibility and control over the design and functionality of your pagination. By following the steps outlined in this blog, you can create a custom pagination system that matches the design of your website or application and provides a user-friendly way for users to navigate through a large amount of content.