前端分页怎么实现?有什么优缺点?什么情况下会用到前端分页?

王静
  • 2
新手上路,请多包涵

前端分页怎么实现?有什么优缺点?什么情况下会用到前端分页?

回复
阅读 3.8k
2 个回答

前端分页如何实现

前端分页,就是把后端的数据先一股脑的全部请求过来,然后前端来计算每页展示多少数据,展示什么数据。例如:

const perPageNum = 20; // 每页展示20条数据
const len = data.length; // 假使已通过接口获取到接口的数据data,计算data的长度
const minPage = 1; // 最小页码是1
const maxPage = Math.ceil(len / perPageNum); // 计算最大的页码
let currentPage = 1; // 当前页码

const curPageData = data.slice((currentPage-1)*perPageNum, currentPage*perPageNum); // 当前页的数据

切换分页的数据,只要修改currentPage就可以了。

前端分页的优缺点

先说缺点:因为是把所有的数据都请求过来,所以第一次请求的时间会比较长一些,因为后端检索这么多数据也挺耗时的。

优点:在分页的过程中,就快了很多,所有的分页操作都是在前端完成的,没有网络请求。而且分页数据需要修改时(例如修改展示数据的条数),前端直接修改就行。

什么情况下会用到前端分页

好像没有什么特别的情况,前端分页和后端分页的情况都差不多。可能会在后台管理系统上比较多一些?

补充:
前端分页缺点:如果想排序所有页的数据还是比较麻烦,element ui 表格数据排序功能只能排序当前页。

前端分页:数据量比较小的情况下适合前端分页,数据量太大,前端一次性取出来在页面渲染,页面会卡死的。

宣传栏