前端做页面时,经常会遇到表格+分页的组合,有时因为一些原因,需要前端自己实现分页,下面介绍2种方法实现分页,
方法一:slice方法
slice(参数1,参数2)方法是返回一个新的数组对象 参数1:起始下标数 参数2:结束下标数(不计算在内) 如data:[1,2,3,4,5,6,7,8],那么data.slice(0,3)就为下标为0,1,2,不包括下标为3的数,即[1,2,3],可以看成数学中的[0,3)
slice方法详细讲解
这个原理就和分页原理很相似,分页也是把一个很长的数组,按照每页多少条(size)分为若干个短数组 关键语句就一句:
//allData为全部数据,tableData是目前表格绑定的数据
this.tableData = this.allData.slice(
(this.page - 1) * this.size,
this.page * this.size
);
this.total=this.allData.length
下面是详细代码:
如果还是不能理解,可以用举例法为大家演示
data=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
总条目数total=20,
若设size=3(每页3条)