Spring Boot Pagination & Filter example
Tags: spring, springboot, webdev, java
Published: 2021-01-01 09:49:04

In this tutorial, I will continue to make Server side Pagination and Filter with Spring Data JPA and <a href="https://docs.spring.io/spring-data/commons/docs/current/api/org/springframework/data/domain/Pageable.html">Pageable</a>.

Full Article: [https://bezkoder.com/spring-boot-pagination-filter-jpa-pageable/](https://bezkoder.com/spring-boot-pagination-filter-jpa-pageable/)

For MongoDB database:
<a href="https://bezkoder.com/spring-boot-mongodb-pagination/">Spring Boot MongoDB Pagination & Filter example with Spring Data</a>

<h2>Spring Boot Pagination & Filter example overview</h2>
One of the most important things to make a website friendly is the response time, and pagination comes for this reason. For example, this bezkoder.com website has hundreds of tutorials, and we don't want to see all of them at once. Paging means displaying a small number of all, by a page.

Assume that we have <strong>tutorials</strong> table in database like this:

![spring-boot-pagination-filter-example-spring-jpa-pageable-table](https://dev-to-uploads.s3.amazonaws.com/i/l10igs6nz7d6tcl02w2g.png)

Here are some url samples for pagination (with/without filter):
<ul>
	<li><code>/api/tutorials?page=1&size=5</code></li>
	<li><code>/api/tutorials?size=5</code>: using default value for page</li>
	<li><code>/api/tutorials?title=data&page=1&size=3</code>: pagination & filter by title containing 'data'</li>
	<li><code>/api/tutorials/published?page=2</code>: pagination & filter by 'published' status</li>
</ul>

This is structure of the Server side pagination result that we want to get from the APIs:
```json
{
    "totalItems": 8,
    "tutorials": [...],
    "totalPages": 3,
    "currentPage": 1
}
```

Read Tutorials with default page index (0) and page size (3):

![spring-boot-pagination-filter-example-spring-jpa-pageable-default](https://dev-to-uploads.s3.amazonaws.com/i/wmlwglj33me4483zjomg.png)

Indicate page index = 2 but not specify size (default: 3) for total 8 items:
<ul>
	<li>page_0: 3 items</li>
	<li>page_1: 3 items</li>
	<li>page_2: 2 items</li>
</ul>

![spring-boot-pagination-filter-example-spring-jpa-pageable-page](https://dev-to-uploads.s3.amazonaws.com/i/w8whzyu4eafz8g6zniqr.png)

Indicate size = 5 but not specify page index (default: 0):

![spring-boot-pagination-filter-example-spring-jpa-pageable-size](https://dev-to-uploads.s3.amazonaws.com/i/rw972nf8se81hp7ow04a.png)

For page index = 1 and page size = 5 (in total 8 items):

![spring-boot-pagination-filter-example-spring-jpa-pageable-page-size](https://dev-to-uploads.s3.amazonaws.com/i/o9pakbmnwys3cr7486cv.png)

Pagination and filter by title that contains a string:

![spring-boot-pagination-filter-example-spring-jpa-pageable-title](https://dev-to-uploads.s3.amazonaws.com/i/6bnyvfkn63hf00wkjgk4.png)

Pagination and filter by published status:

![spring-boot-pagination-filter-example-spring-jpa-pageable-status](https://dev-to-uploads.s3.amazonaws.com/i/djq6en5tg8q171onew2k.png)

For more details, implementation and source code, please visit:
[https://bezkoder.com/spring-boot-pagination-filter-jpa-pageable/](https://bezkoder.com/spring-boot-pagination-filter-jpa-pageable/)

## Further Reading
To bring pagination and sorting together, please visit:
<a href="https://bezkoder.com/spring-boot-pagination-sorting-example/">Spring Boot Pagination and Sorting example</a>

Handle Exception for this Rest APIs is necessary:
<a href="https://bezkoder.com/spring-boot-controlleradvice-exceptionhandler/">Spring Boot @ControllerAdvice & @ExceptionHandler example</a>

You can also know how to deploy this Spring Boot App on AWS (for free) with <a href="https://bezkoder.com/deploy-spring-boot-aws-eb/">this tutorial</a>.

React Pagination Client that works with this Server:
<a href="https://bezkoder.com/react-pagination-material-ui/">React Pagination with API using Material-UI</a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vx0wada230juoz9kwlp2.png)

Angular Client working with this server:
- <a href="https://bezkoder.com/ngx-pagination-angular-8/">Angular 8 Pagination example | ngx-pagination</a>
- <a href="https://bezkoder.com/angular-10-pagination-ngx/">Angular 10 Pagination example | ngx-pagination</a>
- <a href="https://bezkoder.com/angular-11-pagination-ngx/">Angular 11 Pagination example | ngx-pagination</a>

Or Vue Client:
- <a href="https://bezkoder.com/vue-pagination-axios/">Vue Pagination example (Bootstrap)</a>
- <a href="https://bezkoder.com/vuetify-pagination-server-side/">Vuetify Pagination example</a>

Happy learning! See you again.