Pagination With Spring Boot, Thyemeleaf, Spring Data JPA, Hibernate, HTML and MySQL

 

In the previous post, we developed a Spring Boot Web Application(User Management System) with Thyemeleaf, HTML, Spring Data JPA, Maven and MySql Database.

Here in this post / video we are going to implement pagination concept in this Web Application.

What is in this article ?

• Display Total Records (Number of Data present in Database).
• Total Number of Pages.
• Implement First Page, Next Page, Last Page and Previous Page concept.
• Display Number of pages in sequence.

Code Implementation

• To Use Pagination, dao class must have to extend the PagingAndSortingRepository interface, this interface have some methods which helps to implement the pagination concept (You can check the link). 
• JpaRepository interface also extends the PagingAndSortingRepository interface, so if our dao interface implements the JpaRepository interface then no need to implement the PagingAndSortingRepository interface, but in this artice we are going to use PagingAndSortingRepository interface.
• Here we are going to make service class also, because in last article not implemented the service class. 
• In service class we make pagination method.

Implement the code step by step as given below

In dao interface implement the PagingAndSortingRepository interface.

UserDao.java

package com.example.userWebApp;

import org.springframework.data.repository.PagingAndSortingRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface UserDao extends PagingAndSortingRepository<User,Integer> {
}

In Service class make a method to support pagination, pass a parameter which takes page number, you also pass other parameter as page size, but here we are taking default page size value. This method is going to return the User information from database in page form. And the page conatinas all the information like:-

How many records in the database.
According to the page size it will also tell in how many pages data will appear, in short it tells how many pages is there.
These data will helps us to send in html page.

UserService.java

package com.example.userWebApp;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;


@Service
public class UserService {
    @Autowired
    private UserDao userDao;

    public Page<User> getAllUser(int pageNumber){
        Pageable pageable = PageRequest.of(pageNumber-1,5);
        return userDao.findAll(pageable);
    }
}

Edit the existing home() method and implement the below code in home() method, also add a new method by name listByPage(Model model, Integer pageNumber) method, which takes two parameter.
UserController.java

@GetMapping("/")
public String home(Model model){
    return listByPage(model,1);
}
@GetMapping("/page/{pageNumber}")
public String listByPage(Model model,@PathVariable("pageNumber") Integer currentPage){
    Page<User> page = userService.getAllUser(currentPage);
    long totalItems= page.getTotalElements();
    int totalPages = page.getTotalPages();
    List<User> list = page.getContent();
    model.addAttribute("currentPage",currentPage);
    model.addAttribute("totalItems",totalItems);
    model.addAttribute("totalPages",totalPages);
    model.addAttribute("any",list);
    return "home";
}

Add the below code in home.html page

home.html

<table>

    <tr>
        <td>
            <b>
              <span th:each="i:${#numbers.sequence(1,totalPages)}">
              <a th:if="${i != currentPage}" th:href="@{'/page/'+${i}}">[[${i}]]</a>
              <b style="color:#C80BC2"><span th:unless="${i != currentPage}">[[${i}]]</span></b>
          </span>
            </b>
        </td>
    </tr>
</table><br>
<table border ="1">
    <tr>
        <td>
     <a th:if="${currentPage > 1}" th:href="@{/page/1}"> First Page </a>
     <span th:unless="${currentPage > 1}"> First Page </span>
        </td>
        <td>
      <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage + 1}}">Next Page</a>
      <span th:unless="${currentPage < totalPages}"> Next Page </span>
        </td>
        <td>
      <a th:if="${currentPage > 1}" th:href="@{'/page/' + ${currentPage - 1}}">Previous Page</a>
       <span th:unless="${currentPage > 1}"> Previous Page </span>
        </td>
        <td>
      <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${totalPages}}">Last Page</a>
       <span th:unless="${currentPage < totalPages}"> Last Page </span>
        </td>
    </tr>
</table>
<br><br>
<table border="1">
    <tr>
        <td><b>Total Record:</b> [[${totalItems}]]</td>
        <td><b>Current Page:</b> [[${currentPage}]]</td>
        <td><b>Total Page:</b> [[${totalPages}]]</td>
    </tr>
</table>

Thank You!