If you’re building a web application with Spring Boot, you may need to display large amounts of data on a single page. However, displaying all the data at once can be overwhelming and slow down the page. That’s where pagination comes in. Pagination allows you to split large data sets into smaller, more manageable pages. In this tutorial, we’ll show you how to implement pagination in Spring Boot using Thymeleaf.

Implementation

To implement pagination in Spring Boot, you’ll need to follow these steps:

  1. Create a Spring Boot project with Thymeleaf dependencies.
  2. Create a Controller that handles pagination requests.
  3. Implement pagination logic in the Controller.
  4. Create a Thymeleaf template that displays paginated data.
  5. Add pagination controls to the template.

1. Create a Spring Boot project with Thymeleaf dependencies

To get started, create a new Spring Boot project in your IDE. Make sure to include the Thymeleaf dependencies in your pom.xml file:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2. Create a Controller that handles pagination requests

Create a new Controller class that handles pagination requests. Here’s an example:

@Controller
public class PaginationController {
 
    @Autowired
    private EmployeeService employeeService;
 
    @GetMapping("/")
    public String homePage(Model model, @RequestParam(defaultValue = "0") int page) {
        Page<Employee> employees = employeeService.findAll(PageRequest.of(page, 10));
 
        model.addAttribute("employees", employees);
        model.addAttribute("currentPage", page);
 
        return "index";
    }
}

In this example, we’re using Spring Data’s Page and PageRequest classes to implement pagination. The homePage() method takes an optional page parameter, which defaults to 0 if not provided. We then use this parameter to fetch the appropriate page of data from the EmployeeService. Finally, we add the employees and currentPage attributes to the model and return the index template.

3. Implement pagination logic in the Controller

Now that we have a Controller that handles pagination requests, we need to implement the pagination logic. We can do this by adding the following code to the homePage() method:

model.addAttribute("totalPages", employees.getTotalPages());

This code adds a totalPages attribute to the model, which contains the total number of pages in the data set. We can use this attribute to generate pagination controls in the Thymeleaf template.

4. Create a Thymeleaf template that displays paginated data

Create a new Thymeleaf template called index.html. Here’s an example:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Pagination Example</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="employee : ${employees.content}">
                <td th:text="${employee.id}"></td>
                <td th:text="${employee.name}"></td>
                <td th:text="${employee.email}"></td>
            </tr>
        </tbody>
    </table>
 
    <div class="pagination">
        <ul>
            <li th:class="${currentPage == 0} ? disabled : ''">
                <a th:href="@{/}?page=0">First</a>
            </li>
            <li th:class="${currentPage == 0} ? disabled : ''">
                <a th:href="@{/(page=${currentPage - 1})}">&lt;</a>
            </li>
            <li th:class="${currentPage == totalPages - 1} ? disabled : ''">
                <a th:href="@{/(page=${currentPage + 1})}">&gt;</a>
            </li>
            <li th:class="${currentPage == totalPages - 1} ? disabled : ''">
                <a th:href="@{/(page=${totalPages - 1})}">Last</a>
            </li>
        </ul>
    </div>
</body>
</html>

In this template, we display the paginated data in a table. We use Thymeleaf’s th:each attribute to iterate over the content of the current page, and display each employee’s ID, name, and email in separate columns. We also add a pagination div that contains pagination controls, which allows the user to navigate between pages.

5. Add pagination controls to the template

To add pagination controls to the template, we use Thymeleaf’s th:class attribute to conditionally apply the disabled class to the first and last pagination controls when the user is on the first or last page. We also use Thymeleaf’s th:href attribute to generate URLs for the previous, next, first, and last pagination controls.

Pagination in Spring Boot using Thymeleaf

Conclusion

In this tutorial, we’ve shown you how to implement pagination in Spring Boot using Thymeleaf. By splitting large data sets into smaller, more manageable pages, you can create a more user-friendly experience for your application’s users. With the help of Spring Data’s Page and PageRequest classes, and Thymeleaf’s powerful templating engine, pagination in Spring Boot is easy to implement and customize.