前端实现分页 实现个数据分页函数

Posted 2021-01-19 y-y-y-y

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

      //分页数据处理函数
        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改变数据跟着改变实现数据分页功能