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

Question

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

Answer 1

前端分页如何实现

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

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就可以了。

前端分页的优缺点

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

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

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

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

Answer 2

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

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