Using HTML and CSS to create a custom pagination

Pagination is an essential part of any website or application that presents a large amount of data to its users. It allows users to navigate through pages of data easily and quickly. Pagination can be seen on a wide range of websites, from e-commerce stores to blogs, and social media platforms. It is crucial to design pagination that fits your website's overall look and feel, and that is easy to use.

In this blog, we will discuss how to create custom pagination using HTML and CSS. We will cover the basic structure of pagination, how to style it using CSS, and how to add functionality to it using JavaScript.

HTML Pagination Structure

The HTML structure for pagination is relatively simple. We start with a ul element that will contain our pagination links. Each link will be an li element inside the ul. The li elements will contain an a element that will act as the clickable link. Here is an example of the HTML structure:

<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 created a simple pagination structure with five pages. We have used the href attribute to create a clickable link, but this link does not yet have any functionality.

CSS Styling

Now that we have the HTML structure in place, we can style our pagination using CSS. We can use CSS to add colors, borders, and other visual elements to our pagination. Here is an example of some basic CSS that will style our pagination:

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

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

.pagination li {
  margin: 0 10px;
}

.pagination li a {
  display: block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}

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

In this example, we have used the .pagination class to target the entire pagination structure. We have added some margin to the top of the pagination, and used display: flex to center the pagination links horizontally.

We have also used some CSS to style the ul, li, and a elements inside the pagination. We have removed the default list-style, and added some margin to each li element. We have also styled the a elements to have a border, padding, and color. We have used the transition property to add a smooth transition effect when hovering over the links.

Adding Functionality with JavaScript

Our pagination structure looks good now, but it doesn't actually do anything when clicked. To add functionality to our pagination, we can use JavaScript. We can use JavaScript to listen for when a pagination link is clicked, and then load the appropriate page of data.

Here is an example of some JavaScript code that will add functionality to our pagination:

const pagination = document.querySelector('.pagination');
const pages = pagination.querySelectorAll('li');
const pageLinks = pagination.querySelectorAll('a');

function showPage(page) {
  // Replace this with code to load the appropriate page of data
  console.log('Showing page ' + page);
}

for (let i = 0; i < pageLinks.length; i++) {
  pageLinks[i].addEventListener('click', function(e) {
    e.preventDefault();
    const page = parseInt(this.textContent);
    showPage(page);
  });
}

In this example, we have used JavaScript to listen for when a pagination link is clicked. When a link is clicked, we prevent the default behavior of the link using e.preventDefault(). We then use the parseInt() function to convert the text content of the link to a number, which we pass to the showPage() function.

In the showPage() function, we would replace the console.log() statement with code to load the appropriate page of data based on the page number passed to the function.

Conclusion

In conclusion, creating custom pagination using HTML and CSS is relatively straightforward. We start with a simple HTML structure that contains a ul element with li elements for each page link. We can then use CSS to style the pagination, adding colors, borders, and other visual elements.

Finally, we can use JavaScript to add functionality to our pagination, allowing users to click on links to load the appropriate page of data. With these three components in place, we can create custom pagination that fits our website's overall look and feel and is easy to use for our users.