由于工作需要,经常在开发中需要实现表格分页这种特效,目的的为提升用户体验,减少大数据渲染数量。
分页的分两种,一种是要和服务器交互,另一种是一次性拿到所有数据,在本地做分页处理。本次主要谈论第二种。
分页原理很简单,无非就是数组切片。
最关键是这两句:
var startRow = (currentPage - 1) * pageSize; //currentPage 为当前页,pageSize为每页显示的数据量
var endRow = currentPage * pageSize -1;比如我们要将数据每页5条展示,那么第一页的开始行就为 (1-1)* 5 = 0;结束行就为 1 * 5 - 1 = 4 (数组下标从0开始),依次类推,
第二页开始行就为 (2-1)* 5 = 5;结束行就为 2 * 5 - 1 = 9
找到我们需要显示的行的范围然后进行渲染操作
下面是一个简单的表格分页效果
本文仅做个人学习记录之用,如有错误之处,还请网页纠正,谢谢
Document
ID 用户名 年龄 毕业学校 备注