使用javascript slice函数实现模拟分页

在前端中有时需要自己写mock api, 数据库方面并不一定要用mysql这样的,用json文件同样也可以模拟数据库,使用require函数读取json文件获取到一个json对象/数组,下面介绍怎么使用slice函数进行模拟分页:

分页时只需要这几个参数: 

baseData: 待分页的数据(通常是一个数组,因为mysql的表就是线性的数据,本质就是数组)

当前页码:pageNum

每页显示条数:pageSize

那么分页的核心代码如下

  // 计算总页数
  const totalPages = Math.ceil(baseData.length / pageSize);

  // 计算起始索引和结束索引
  const startIndex = (pageNumber - 1) * pageSize;
  const endIndex = Math.min(startIndex + pageSize, baseData.length);

  // 使用 slice 方法截取分页需要返回的数据
  queryPageInfo = baseData.slice(startIndex, endIndex);

  // 计算上一页和下一页
  const prevPage = pageNumber > 1 ? pageNumber - 1 : null;
  const nextPage = pageNumber < totalPages ? pageNumber + 1 : null;

简单解释一下slice函数的用法:

slice(start,end)==>表示截取数组: 起始索引:start, 结束索引:(end-1),这两段之间的数据

之所以还需要计算prevPage(上一页)和nextPage(下一页), 是因为需要发给前端做分页按钮时的分页信息:

  paginationInfo = {

    prevPageLink,

    nextPageLink,

    totalCount: baseData.length,

    pageSize,

    currentPage: pageNumber,

    totalPages,

  };

而计算prePageLink和nextPageLink 就需要prevPage和nextPage这两个参数

  const prePageLink = prevPage

    ? `${baseUrl}?pageNumber=${prevPage}&pageSize=${pageSize}`

    : null;

  const nextPageLink = nextPage

    ? `${baseUrl}?pageNumber=${nextPage}&pageSize=${pageSize}`

    : null;

 这个分页信息可以设置到response的header中,然后web端通过request读取header获取分页信息:

res.header("x-pagination", JSON.stringify(paginationInfo))

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值