1, 开发过程中, 分页功能一般是后台提供接口, 前端只要传 page(当前页码) 和 pageSize(每页最大显示条数) 及对应的其他查询条件, 就可以返回所需分页显示的数据.
但是有时也需要前端本地进行一些简单的分页处理以减轻浏览器渲染时的内存损耗. 如后台传回的数据条数非常多, 达到几千条甚至上万条, 但是后台又不方便分页传回数据, 这个时候就只能前端先获取所有数据保存下来, 然后前端本地进行分页并渲染显示.
2, 只需要一个纯原生的 JS 函数就可以实现前端的分页功能, 直接上 JS 代码:
- /**
- * @name getTableData
- * @desc 纯 JS 前端分页方法
- * @param {Number} page 当前页码, 默认 1
- * @param {Number} pageSize 每页最多显示条数, 默认 10
- * @param {Array} totalData 总的数据集, 默认为空数组
- * @return {Object} {
- data, // 当前页展示数据, 数组
- page, // 当前页码
- pageSize, // 每页最多显示条数
- length, // 总的数据条数
- }
- **/
- const getTableData = (page = 1, pageSize = 10, totalData = []) => {
- const { length } = totalData;
- const tableData = {
- data: [],
- page,
- pageSize,
- length,
- };
- if (pageSize>= length) { //pageSize 大于等于总数据长度, 说明只有 1 页数据或没有数据
- tableData.data = totalData;
- tableData.page = 1;// 直接取第一页
- } else { //pageSize 小于总数据长度, 数据多余 1 页
- const num = pageSize * (page - 1);// 计算当前页 (不含) 之前的所有数据总条数
- if (num <length) { // 如果当前页之前所有数据总条数小于 (不能等于) 总的数据集长度, 则说明当前页码没有超出最大页码
- const startIndex = num;// 当前页第一条数据在总数据集中的索引
- const endIndex = num + pageSize - 1;// 当前页最后一条数据索引
- tableData.data = totalData.filter((_, index) => index>= startIndex && index <= endIndex);// 当前页数据条数小于每页最大条数时, 也按最大条数范围筛取数据
- } else { // 当前页码超出最大页码, 则计算实际最后一页的 page, 自动返回最后一页数据
- const size = parseInt(length / pageSize); // 取商
- const REST = length % pageSize; // 取余数
- if (REST> 0) { // 余数大于 0, 说明实际最后一页数据不足 pageSize, 应该取 size+1 为最后一条的页码
- tableData.page = size + 1;// 当前页码重置, 取 size+1
- tableData.data = totalData.filter((_, index) => index>= (pageSize * size) && index <= length);
- } else if (REST === 0) { // 余数等于 0, 最后一页数据条数正好是 pageSize
- tableData.page = size;// 当前页码重置, 取 size
- tableData.data = totalData.filter((_, index) => index>= (pageSize * (size - 1)) && index <= length);
- } // 注: 余数不可能小于 0
- }
- }
- return tableData;
- };
只需要传入对应参数就可以返回带有对应分页属性的对象, 用于前端界面展示.
如有问题欢迎留言讨论.
来源: http://www.bubuko.com/infodetail-3107397.html