纯JS前端分页方法（JS分页）

一、JS分页函数：开发过程当中，分页功能通常是后台提供接口，前端只要传page（当前页码）和pageSize（每页最大显示条数）及对应的其余查询条件，就能够返回所需分页显示的数据。

可是有时也须要前端本地进行一些简单的分页处理以减轻浏览器渲染时的内存损耗。如后台传回的数据条数很是多，达到几千条甚至上万条，可是后台又不方便分页传回数据，这个时候就只能前端先获取全部数据保存下来，而后前端本地进行分页并渲染显示。

二、只须要一个纯原生的js函数就能够实现前端的分页功能，直接上js代码：

 1 /**
 2  * @name  getTableData
 3  * @desc  纯JS前端分页方法
 4  * @param  {Number} page 当前页码，默认1
 5  * @param  {Number} pageSize 每页最多显示条数，默认10
 6  * @param  {Array} totalData 总的数据集，默认为空数组
 7  * @return {Object} {
 8     data, //当前页展现数据，数组
 9     page, //当前页码
10     pageSize, //每页最多显示条数
11     length, //总的数据条数
12   }
13 **/
14 const getTableData = (page = 1, pageSize = 10, totalData = []) => {
15   const { length } = totalData;
16   const tableData = {
17     data: [],
18     page,
19     pageSize,
20     length,
21   };
22   if (pageSize >= length) { //pageSize大于等于总数据长度，说明只有1页数据或没有数据
23     tableData.data = totalData;
24     tableData.page = 1;//直接取第一页
25   } else { //pageSize小于总数据长度，数据多余1页
26     const num = pageSize * (page - 1);//计算当前页（不含）以前的全部数据总条数
27     if (num < length) { //若是当前页以前全部数据总条数小于（不能等于）总的数据集长度，则说明当前页码没有超出最大页码
28       const startIndex = num;//当前页第一条数据在总数据集中的索引
29       const endIndex = num + pageSize - 1;//当前页最后一条数据索引
30       tableData.data = totalData.filter((_, index) => index >= startIndex && index <= endIndex);//当前页数据条数小于每页最大条数时，也按最大条数范围筛取数据
31     } else { //当前页码超出最大页码，则计算实际最后一页的page，自动返回最后一页数据
32       const size = parseInt(length / pageSize); //取商
33       const rest = length % pageSize; //取余数
34       if (rest > 0) { //余数大于0，说明实际最后一页数据不足pageSize，应该取size+1为最后一条的页码
35         tableData.page = size + 1;//当前页码重置，取size+1
36         tableData.data = totalData.filter((_, index) => index >= (pageSize * size) && index <= length);
37       } else if (rest === 0) { //余数等于0，最后一页数据条数正好是pageSize
38         tableData.page = size;//当前页码重置，取size
39         tableData.data = totalData.filter((_, index) => index >= (pageSize * (size - 1)) && index <= length);
40       } //注：余数不可能小于0
41     }
42   }
43   return tableData;
44 };

只须要传入对应参数就能够返回带有对应分页属性的对象，用于前端界面展现。

 

若有问题欢迎留言讨论。

原创博客禁止抄袭，转载请注明出处：原文地址:https://www.cnblogs.com/xiao-pengyou/