纯JS前端分页⽅法（JS分页）
1、JS分页函数：开发过程中，分页功能⼀般是后台提供接⼝，前端只要传page（当前页码）和pageSize（每页最⼤显⽰条数）及对应的其他查询条件，就可以返回所需分页显⽰的数据。
但是有时也需要前端本地进⾏⼀些简单的分页处理以减轻浏览器渲染时的内存损耗。如后台传回的数据条数⾮常多，达到⼏千条甚⾄上万条，但是后台⼜不⽅便分页传回数据，这个时候就只能前端先获取所有数据保存下来，然后前端本地进⾏分页并渲染显⽰。
2、只需要⼀个纯原⽣的js函数就可以实现前端的分页功能，直接上js代码：
1/**
2 * @name getTableData
3 * @desc 纯JS前端分页⽅法
4 * @param {Number} page 当前页码，默认1
5 * @param {Number} pageSize 每页最多显⽰条数，默认10
6 * @param {Array} totalData 总的数据集，默认为空数组
7 * @return {Object} {
8 data, //当前页展⽰数据，数组
9 page, //当前页码
10 pageSize, //每页最多显⽰条数
11 length, //总的数据条数
12 }
13**/
14 const getTableData = (page = 1, pageSize = 10, totalData = []) => {
15 const { length } = totalData;
16 const tableData = {
17 data: [],
原生js和js的区别18 page,
19 pageSize,
20 length,
21 };
22if (pageSize >= length) { //pageSize⼤于等于总数据长度，说明只有1页数据或没有数据
23 tableData.data = totalData;
24 tableData.page = 1;//直接取第⼀页
25 } else { //pageSize⼩于总数据长度，数据多余1页
26 const num = pageSize * (page - 1);//计算当前页（不含）之前的所有数据总条数
27if (num < length) { //如果当前页之前所有数据总条数⼩于（不能等于）总的数据集长度，则说明当前页码没有超出最⼤页码
28 const startIndex = num;//当前页第⼀条数据在总数据集中的索引
29 const endIndex = num + pageSize - 1;//当前页最后⼀条数据索引
30 tableData.data = totalData.filter((_, index) => index >= startIndex && index <= endIndex);//当前页数据条数⼩于每页最⼤条数时，也按最⼤条数范围筛取数据
31 } else { //当前页码超出最⼤页码，则计算实际最后⼀页的page，⾃动返回最后⼀页数据
32 const size = parseInt(length / pageSize); //取商
33 const rest = length % pageSize; //取余数
34if (rest > 0) { //余数⼤于0，说明实际最后⼀页数据不⾜pageSize，应该取size+1为最后⼀条的页码
35 tableData.page = size + 1;//当前页码重置，取size+1
36 tableData.data = totalData.filter((_, index) => index >= (pageSize * size) && index <= length);
37 } else if (rest === 0) { //余数等于0，最后⼀页数据条数正好是pageSize
38 tableData.page = size;//当前页码重置，取size
39 tableData.data = totalData.filter((_, index) => index >= (pageSize * (size - 1)) && index <= length);
40 } //注：余数不可能⼩于0
41 }
42 }
43return tableData;
44 };
只需要传⼊对应参数就可以返回带有对应分页属性的对象，⽤于前端界⾯展⽰。
如有问题欢迎留⾔讨论。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论