前端手动分页

在后台没有做分页的情况下,前端可以自己写好算法并借用elementui之类的ui组件里的Page分页功能手动完成分页;
具体思路是根据后台传回的源数据 处理成二维数组;
1、总数量除以每页数量并向上取整获取总页数;Array(‘总页数’).fill([])获取一个基于总数索引的二维空数组;
2、for循环总页数,每次向二维数组传入数据;
3、每次点击分页current-change事件返回的页数 - 1就是该数组页码对应的数据;

具体代码如下

// 手写分页数据
    private sliceArray(arr: any[], size: number = 10) {
        // arr 原数组数据 size 一页数量
        if (arr.length > size) {
            //
            const index: number = Math.ceil(arr.length / 10); // 预计需要的二维数组的长度
            let newArr: any[] = Array(index).fill([]); // 初始化一个二维数组
            let end: number = 0; // 每次分页最后的索引
            // 循环二维数据取值
            for (let i = 0; i < index; i++) {
                end = i * size + size;
                if (end > arr.length) {
                    end = (arr.length % end) + i * size;
                }
                newArr[i] = arr.slice(i * size, end);
            }
            return newArr;
        } else {
            return [arr];
        }
    }
    

分页触发事件

	private checkPage(e: number) {
        // this.todayAll就是sliceArray方法 return接收的数据;
        this.tableData = this.todayAll[e - 1]
    }
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值