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

Love The Way You Lie 2023-10-16 13:55 6阅读 0赞

在前端中有时需要自己写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))