首页 > 其他分享 >前端js的数据纯前端分页通用方法封装

前端js的数据纯前端分页通用方法封装

时间:2022-10-21 14:58:28浏览次数:50  
标签:index 封装 pageSize 前端 list js dataSource currentPage

用elementui分页组件的话可以直接用这个函数

将拿到的总的数据缓存起来,然后分别在切换页数,翻页的时候调用这个方法既可

/**
 * 前端分页,不再次请求接口,不破坏原数组list
 * @param list 请求接口返回的全部数据
 * @param pageSize 一页展示的数据个数
 * @param currentPage 当前页码
 * @returns []
 */
export function getPagination (list, pageSize, currentPage) {
  let dataSource = [];
  if (list.length < pageSize) {
    //判断当前获取的接口数据的长度是否大于设置的展示个数(总页数是否大于1)
    const index = (currentPage - 1) * pageSize;
    dataSource = list.slice(index, pageSize);//截取当页展示数据
  } else if (currentPage === Math.ceil(list.length / pageSize)) {
    //当前页码是否为最后一页
    const index = (currentPage - 1) * pageSize;
    dataSource = list.slice(index);
  } else {
    /**
     * 若总页数大于1,且当前页码不是最后一页时
     * 获取下标(index)截取数据(dataSource)
    */
    const index = (currentPage - 1) * pageSize;
    dataSource = list.slice(index, currentPage * pageSize);
  }
  return dataSource;
}

 

标签:index,封装,pageSize,前端,list,js,dataSource,currentPage
From: https://www.cnblogs.com/pengfei25/p/16813443.html

相关文章