js纯前端分页方法封装

/**
*
* @param {所有数据数组} resData
* @param {当前页} pageNum
* @param {每页多少条数据} pageSize
*/

getTabelData2 (resData, pageNum, pageSize) {
  let data = JSON.parse(JSON.stringify(resData))
  this.ListData = data.slice(
    (pageNum - 1) * pageSize, // 控制因子:全局变量
    pageNum * pageSize
  )
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果不使用后端接口前端封装分页,可以在前端实现手动分页的代码逻辑。具体做法如下: 1. 在前端请求数据时,一次性获取所有数据。 2. 根据每页显示的数量和当前页数,计算需要显示的数据的起始索引和结束索引。 3. 使用数组的slice方法,截取需要显示的数据。 4. 在前端实现翻页逻辑,包括上一页和下一页按钮的点击事件,以及当前页数的显示等。 以下是一个简单的实现示例: ```javascript // 假设数据列表的总长度为dataList.length var pageSize = 10; // 每页显示的数量 var currentPage = 1; // 当前页数 // 计算需要显示的数据的起始索引和结束索引 var startIndex = (currentPage - 1) * pageSize; var endIndex = startIndex + pageSize; // 截取需要显示的数据 var pageData = dataList.slice(startIndex, endIndex); // 在前端实现翻页逻辑 // 上一页按钮点击事件 function prevPage() { if (currentPage > 1) { currentPage--; startIndex = (currentPage - 1) * pageSize; endIndex = startIndex + pageSize; pageData = dataList.slice(startIndex, endIndex); renderPage(); } } // 下一页按钮点击事件 function nextPage() { if (currentPage < Math.ceil(dataList.length / pageSize)) { currentPage++; startIndex = (currentPage - 1) * pageSize; endIndex = startIndex + pageSize; pageData = dataList.slice(startIndex, endIndex); renderPage(); } } // 渲染页面 function renderPage() { // 渲染当前页数的显示 // 渲染数据列表 } ``` 需要注意的是,这种方法的缺点是当数据量非常大时,一次性获取所有数据可能会导致性能问题,因此建议在数据量较大时使用后端分页。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值