分页--前后端联调

「爱情、让人受尽委屈。」 2022-08-31 04:40 247阅读 0赞

前面，我们写了element Table+Pagination实现分页[https://blog.csdn.net/hejingfang123/article/details/118875170][https_blog.csdn.net_hejingfang123_article_details_118875170]，但是，只是静态页面，后面，我们写了真分页后端实现--Mybatis[https://blog.csdn.net/hejingfang123?spm=1001.2101.3001.5343][https_blog.csdn.net_hejingfang123_spm_1001.2101.3001.5343]，接下来，轮到前后端联调了---

另外，要注意一个问题：当我们应用分页而且可以支持删除的时候，如果我们删除页面的最后一条数据或者其他情况，页码可能会出现问题，不过，下面的三段代码可以完美的帮我们避免：

//定义一个总页数=(数据总条数-1)/每页条数
    //Math.ceil():向上取整
    //假设数据总条数为21，每页10条数据，总页数=向上取整(21/10)=3
    //删除一条数据，数据总条数=21-1=20，总页数=向上取整(20/10)=2
    const totalPage = Math.ceil((this.totalQuestion - 1) / this.queryQuestion.pageSize);
    //当前页数=当前页数>总页数?总页数:当前页数(如果当前页数>总页数，当前页数就是总页数，否则还是当前页数)
    //假设删除之前当前页码为最后一页，也就是第3页
    //删除之后总页数就变成了上面我们算出的2
    //因此，当前页就变成了第2页
    this.queryQuestion.pageNum =this.queryQuestion.pageNum > totalPage? totalPage: this.queryQuestion.pageNum;
    //当前页数=当前页数<1?1:当前页数(如果当前页数<1,当前页数就是1，否则还是当前页数)
    //这个场景是针对于只有一条数据，我们将它删除，此时我们将当前页码设置为1
    this.queryQuestion.pageNum =this.queryQuestion.pageNum < 1 ? 1 : this.queryQuestion.pageNum;

首先，肯定是有一个前提的，就是我们会每次删除完之后就查询一次

下面我们来假设一个场景，一共有21条数据，每页10条数据，我们现在在第3页，第3页一共1条数据，我们将这条数据删除，如果没有上面的三句话，大家猜测一下会出现什么情况？

总数据为20条，当前页码还在第三页，第三页数据为空。但是正常情况是不是这一页的数据删除完了，就会自动切换到上一页呢，如何实现呢？

首先用到了第一条：

总页数为（21-1）/10=2

const totalPage = Math.ceil((this.totalQuestion - 1) / this.queryQuestion.pageSize);

然后是第二条：

当前页数3>总页数2，因此当前页数应该为2

this.queryQuestion.pageNum =this.queryQuestion.pageNum > totalPage? totalPage: this.queryQuestion.pageNum;

这样，就自动切换到第二页啦啦啦啦啦！

总结：第一次使用分页，目前我们实现的功能只是最基础的，优化空间还是超级大的，比如每页大小可以根据用户选择来定义；数据很多，可以定义更多搜索方式等等等等。

首次做，在此做下小小的总结，留个纪念，望大家多多指正~~~

[https_blog.csdn.net_hejingfang123_article_details_118875170]: https://blog.csdn.net/hejingfang123/article/details/118875170
[https_blog.csdn.net_hejingfang123_spm_1001.2101.3001.5343]: https://blog.csdn.net/hejingfang123?spm=1001.2101.3001.5343