Javascript Spring Boot中的分页未按预期工作？

我正在使用JavaScript、Ajax和Spring Boot构建小型TODO项目。我做了所有的积垢操作，测试了它们，它们都能工作

现在我使用Spring Boot混合分页，如下所示：

 @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);
        }

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

现在，当页面第一次加载时，我设置了名为

pageNumber

的原型属性，正如我上面解释的。第一次加载页面时，会给我带来两个

TODO

s对象，以及是否是最后一页的信息

每次我点击

Load more todo

按钮，“static”

pageNumber

变量增加，我得到以下两个实体。变量的递增如下所示：

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

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

问题是：

第二次单击后，在我的UI上有

执行a

，

执行b

，

执行c

和

执行d

。接下来我删除

do b

和

do c

。我确实会从UI中删除，并从数据库中逻辑删除，如下所示：

 @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);
        }

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

现在在UI中，我有

执行a

和

执行d

。问题来了。在我的数据库中，我确信我没有删除

do e

和

do f

，但是一旦我第二次点击

Load more按钮

，页面号等于2（这是OK），在我的回复中，我得到的页面是最后一个，但我得到的是一个空的Json数组！快把我逼疯了

接下来，如果我再加载一次页面，最后两个元素

doe

和

dof

将从数据库中获取

下面是我的Ajax GET请求的样子：

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...")
        }
    });

})

}

以下是单击按钮时调用的函数：

    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);
        })
}

---

当您在

UI

中删除记录时，您是否也更改了页码？以及您是如何知道下一步要提取哪个记录的，因为您再次说过，您单击“加载更多”按钮，它将提取正确的记录的？所以下一个值将是

3

？@Swati No，当我单击Delete时，该div或从DOM中删除的任何内容将被发送到后端进行删除。第一次加载页面时（如：$（function（）{…}））page.prototype.pageNumber被初始化为0，每次单击都会增加该变量。Spring Boot中的分页从零开始。在不删除任何记录的情况下，代码是否被接受？@Swati是的，这是正确的。如果我只是要求下一页，我就得到了我所需要的。首先，a和b，第一次单击->c和d，第二次单击->e和f。我开始问自己，Spring Boot中的分页是针对这类事情的，还是必须以不同的方式实现……希望有人能了解这种愚蠢行为……所以我认为问题出在删除过程中的某个地方。请确保在删除时，然后单击“加载更多正确的值”以将其传递到后端，或者pageno或date值可能有问题。此外，请确保后端中的

pageno

是否正确，以及spring boot中的值是否正确。对不起，我在spring中的知识有限：）。当您在

UI

中删除记录时，您是否也更改了页码？还有，您是如何知道下一步要提取哪个记录的，因为您再次说过，您单击“加载更多”按钮，它将提取正确的记录的？所以下一个值将是

3

？@Swati No，当我单击Delete时，该div或从DOM中删除的任何内容将被发送到后端进行删除。第一次加载页面时（如：$（function（）{…}））page.prototype.pageNumber被初始化为0，每次单击都会增加该变量。Spring Boot中的分页从零开始。在不删除任何记录的情况下，代码是否被接受？@Swati是的，这是正确的。如果我只是要求下一页，我就得到了我所需要的。首先，a和b，第一次单击->c和d，第二次单击->e和f。我开始问自己，Spring Boot中的分页是针对这类事情的，还是必须以不同的方式实现……希望有人能了解这种愚蠢行为……所以我认为问题出在删除过程中的某个地方。请确保在删除时，然后单击“加载更多正确的值”以将其传递到后端，或者pageno或date值可能有问题。此外，请确保后端中的

pageno

是否正确，以及spring boot中的值是否正确。对不起，我对春天的知识有限：）。