Pagination in Spring Boot not working as expected?

[Mike Gosling]

I'm building small TODO project using JavaScript, Ajax and Spring Boot. I did make all CRUD operations, tested them and they work.

Now I blend in pagination using Spring Boot, like so:

@GetMapping(value = "/" )  
public Page<Task> getAllTasks(
                @RequestParam(value = "page", required = true) Optional<Integer> pageNumber,
                @RequestParam(value = "date", required = true) String date){
    
            Pageable pageable = PageRequest.of(pageNumber.orElse(0), TODOS_PER_PAGE); //TODOS_PER_PAGE=2
            LocalDate localDate = parse(date);
    
            return taskService.getAllTasksByDate(localDate, pageable);
        }

I have following data:

Exactly six TODO records with their title from do a to do f, with indexes from 1 to 6.

The UI in the browser once the page first time loads (attachment 1).

Now, in JavaScript, I made some constructor function called Page, so I can keep reference on current page. Kinda to mimic static in Java.

It looks like this:

function Page() {
    this.someNonimportantProperty = "";
}

Now, once the page first time loads, I set property of prototype called pageNumber, as I explaind above. The first time loading of a page will bring me two TODOs object, along with information whether it is the last page or not.

Each time I click Load more todos button, "static" pageNumber variable increases and I get following two entities. Increasing of variable looks like this:

Page.prototype.pageNumber = Page.prototype.pageNumber + 1;

Here is the problem:

Once I click second time, on my UI I have do a, do b, do c and do d. Next I delete do b and do c. I do remove the from UI and logically delete the from database, like so:

@Entity
@Table(name = "task")
@SQLDelete(sql = "UPDATE task SET active = false WHERE id = ?")
@Where(clause = "active = true")
public class Task { ...}

Now in UI, I have do a and do d. Here comes the problem. In my database I'm sure I have do e and do f not deleted, but once I click for the second time on Load more button, the pageNumber is equal to 2 (which is okey) and in my response I get that the page is last, but I get an EMPTY Json array! Drives me nuts!

Next, if I load page one more time, those last two elements do e and do f get fetched from db.

Here is how my Ajax GET request looks like:

function triggerGetRequest(pageNumber) {

return new Promise((resolve, reject) => {
    //
    $.ajax({
        type: 'GET',  // http method
        url: window.location + "api/tasks/?page=" + pageNumber + "&date=" + convertDateToString(new Date(datepicker.value)), //endpoint on our backend
        contentType: "application/json",
        dataType: 'json',
        success: function (data) {
            
            
            resolve(data)
        },
        error: function () {
            reject("error on server...")
        }
    });

})
}

These is the function which gets called on button click:

function loadmore(event) {
    Page.prototype.pageNumber = Page.prototype.pageNumber + 1;
    console.log(Page.prototype.pageNumber)

    triggerGetRequest(Page.prototype.pageNumber)
        .then((data) => {
            console.log(data)

            dynamicallyUpdateDOM(transform(data));
        })
        .catch((error) => {
            alert(error);
        })
}

[Himai Minh]

I am not quiet sure what is going on with do e and do f after you delete a, b, c, d and you have to load the page for a second time to see them.
Maybe, try to use non-Ajax and see ?