In this article, we are going to present the Bootstrap Thymeleaf Table component handled by the Spring Boot application server. Tables are simple UI components for presenting structured data.
More articles about Thymeleaf could be found under the following links:
Getting Started With Thymeleaf
Thymeleaf With Datatable Component
2.1. Maven dependencies
To demonstrate the Thymeleaf Table component with pagination we used a simple Spring Boot application created as a Maven project with the following dependencies:
2.2. Front-End libraries
- bootstrap - a frontend framework for creating responsive designs.
pom.xml file has the following structure:
3. Model, Web Controllers, and Main Application class
In the model layer we have several objects representing the page of data:
class Page<T> - object that wraps list of items, additionally hods total pages number,
class Paged<T> - contains
Page wrapper and
class Paging - responsible for pagination logic,
class PageItem - holds the pagination items (links, dots),
enum PageItemType - enum that represents pagination item type.
The structure of the model pagination objects:
Application is the Java class with the main method that starts the Spring Boot application server:
In the presentation layer, we have a single view index.html.
index.html template has the following structure:
5. The output
The running application is available under
http://localhost:8080 URL and presents the following functionality:
In this article, we showcased how to use Bootstrap Table in Thymeleaf templates. The presented table component was extended by simple pagination based on simply GET requests.
As usual, the code used in this article is available under our GitHub repository