Chapter 1: Request and Response

In the current situation, we see that in our frontend - which is written in React - we see a mismatch in request and response in terms of pagination index.

Request:

This is in the payload of the request:

<https://portal-dev.mdfinfra.com/damage-management?page=2>

page: 1
amount: 10
sort: damageType,desc
lang: en

page: 2
amount: 10
sort: damageType,desc
lang: en

Response:

  "pageable": {
        "pageNumber": 0,
        "pageSize": 10,
        "sort": {
            "empty": false,
            "sorted": true,
            "unsorted": false
        },
        "offset": 0,
        "paged": true,
        "unpaged": false
    },
    "last": false,
    "totalElements": 31,
    "totalPages": 4,
    "first": true,
    "size": 10,
    "number": 0,
    "sort": {
        "empty": false,
        "sorted": true,
        "unsorted": false
    },
    "numberOfElements": 10,
    "empty": false
}

As can be seen from the response by the backend - which is written in Java Spring Boot - we see that the pageNumber returned is 0. This is a common mismatch that can occur, since the frontend typically sends page number starting from index 1. While Java starts the pagenation count index from 0.

In this troubleshoot session, we are going to show we solved this typical mismatch between frontend and backend in terms of pagination indexing, at Sensey.

Let’s go!

Chapter 2: Background

First, let’s understand the relation between Page, Pageable and PageRequest in Java.

Both Pageable and Page are interfaces in Spring Data. They serve different purposes:

1️⃣ Pageable (Interface)

• Defines pagination settings (page number, size, sorting).
• Used to request a paginated dataset.
• Does NOT contain actual data.
• Implemented by PageRequest.