首页 > 技术文章 > 前端实现分页 实现个数据分页函数

y-y-y-y 2018-11-14 11:11 原文

前端拿到所有数据实现分页函数代码如下:

      //分页数据处理函数
        pageDataFn(number){
            //处于第几页 number
            //保存每页数据的函数
            pagedata = [];
            //pageSize 每页条数
             //设置开始
            let start = (pageSize * number) - pageSize;
            // 设置结束长度
            let end = pageSize * number;
        //长度判断
      //所有分页数据 getdata.children
        end = end > getdata.children.length ? getdata.children.length : end;

for(let i = start; i < end; i++){ //所有分页数据 getdata.children pagedata.push(getdata.children[i]) } }

这个函数很简单可以再次封装一下 就可以一直使用了如下

    //分页数据处理函数
        pageDataFn(number,pageSize,data ){
            //处于第几页 number
            //保存每页数据的数组
            pagedata = [];
            //pageSize 每页条数
             //设置开始
            let start = (pageSize * number) - pageSize;
            // 设置结束长度
            let end = pageSize * number;
       end = end > data.length ? data.length : end;
for(let i = start; i < end; i++){ //所有分页数据 data pagedata.push(data[i]) } return pagedata ; }

然后渲染这个函数的返回值就行了 number改变数据跟着改变实现数据分页功能

推荐阅读