top of page

Just Jolly Functions

Functions: Adding Pagination with HTML and CSS

Pagination is a technique used in web design to divide content into multiple pages, making it easier for users to navigate large sets of data or long lists. It typically involves creating navigation links (such as "Previous" and "Next" buttons, or page numbers) that allow users to move between different sections or pages of content. Pagination improves the user experience by reducing load times and keeping the interface clean and organized.



Pagination Code:

<nav class="pagination">
  <a href="previous-page.html" class="prev">Previous</a>
  <a href="next-page.html" class="next">Next</a>
</nav>

<style>
  .pagination {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .pagination .prev {
    text-align: left;
  }
  .pagination .next {
    text-align: right;
  }
</style>

Explanation:

  1. display: flex; on the .pagination element enables a flexbox layout.

  2. justify-content: space-between; ensures that the "Previous" link is pushed to the left and the "Next" link is pushed to the right.

  3. The .prev and .next classes are just to make sure the individual links have the correct styles.


This should align the "Previous" button on the left side and the "Next" button on the right side of your container.



Step-by-Step Instructions for Manually Adding Links for Previous and Next

You will create two links, one for the Previous page and one for the Next page.


Example of Basic HTML for Manual Link Addition

Here’s a basic structure where users can manually add the URLs of the "Previous" and "Next" pages:

<nav class="pagination">
  <!-- Previous Page Link (Manually set the URL here) -->
  <a href="https://www.example.com/previous-page" class="prev">Previous</a>
  
  <!-- Next Page Link (Manually set the URL here) -->
  <a href="https://www.example.com/next-page" class="next">Next</a>
</nav>

How to Add Links Manually:

  1. For the Previous Page Link:

    • Replace https://www.example.com/previous-page with the actual URL of the previous page. For example, if you're on page 3 and you want to link to page 2, you would enter the link like this:

    <a href="https://www.example.com/page-2" class="prev">Previous</a>

  2. For the Next Page Link:

    • Similarly, replace https://www.example.com/next-page with the actual URL of the next page. For example, if you're on page 3 and you want to link to page 4, you would enter the link like this:

    <a href="https://www.example.com/page-4" class="next">Next</a>


Example for a 5-Page Sequence (Manually Entered Links):

If you're creating links for a 5-page sequence and want to manually add the URLs for the Previous and Next links, here's how you would structure it for different pages.


Page 1:

<nav class="pagination">
  <!-- Previous Page Link (no previous page, so link disabled) -->
  <a href="#" class="prev disabled">Previous</a>
  
  <!-- Next Page Link -->
  <a href="https://www.example.com/page-2" class="next">Next</a>
</nav>

Page 2:

<nav class="pagination">
  <!-- Previous Page Link -->
  <a href="https://www.example.com/page-1" class="prev">Previous</a>
  
  <!-- Next Page Link -->
  <a href="https://www.example.com/page-3" class="next">Next</a>
</nav>

Page 3:

<nav class="pagination">
  <!-- Previous Page Link -->
  <a href="https://www.example.com/page-2" class="prev">Previous</a>
  
  <!-- Next Page Link -->
  <a href="https://www.example.com/page-4" class="next">Next</a>
</nav>

Page 4:

<nav class="pagination">
  <!-- Previous Page Link -->
  <a href="https://www.example.com/page-3" class="prev">Previous</a>
  
  <!-- Next Page Link -->
  <a href="https://www.example.com/page-5" class="next">Next</a>
</nav>

Page 5:

<nav class="pagination">
  <!-- Previous Page Link -->
  <a href="https://www.example.com/page-4" class="prev">Previous</a>
  
  <!-- Next Page Link (no next page, so link disabled) -->
  <a href="#" class="next disabled">Next</a>
</nav>

Explanation of How to Manually Add Links:

  1. Manual Link Input:

  2. Disabling Links for the First and Last Pages:

    • For the first page, the "Previous" button typically doesn’t link to anything, so you can set href="#" and add a disabled class.

    • Similarly, for the last page, the "Next" button should also be disabled, so you would set href="#" for the "Next" link.


Customization Tips:

  • Disabling Links (Visual Feedback for Disabled State): To disable the "Previous" link on the first page and the "Next" link on the last page, you can use CSS to style the disabled links:

.pagination .disabled {
  color: #aaa;  /* Grey out the link */
  pointer-events: none;  /* Prevent the link from being clickable */
}

  • Styling the Pagination Links: You can also customize the appearance of the pagination buttons using CSS:

.pagination {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  background-color: #f0f0f0;
}

.pagination a {
  text-decoration: none;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.pagination a:hover {
  background-color: #0056b3;
}

.pagination .disabled {
  background-color: #ddd;
  color: #888;
}

Final Notes:

  • Manual URL Entry: You can manually enter the URLs for the "Previous" and "Next" page links by changing the href attributes to the desired URLs (e.g., https://www.example.com/page-2 or https://www.example.com/page-4).

  • Edge Case Handling: Make sure to handle the first and last pages by disabling the "Previous" and "Next" buttons accordingly.


This method allows full flexibility to enter your own links for pagination.

bottom of page