Javascript 为什么分页计算不正确?
我想在我的Vue应用程序中实现自定义分页,但计算不正确Javascript 为什么分页计算不正确?,javascript,algorithm,vue.js,pagination,vuetify.js,Javascript,Algorithm,Vue.js,Pagination,Vuetify.js,我想在我的Vue应用程序中实现自定义分页,但计算不正确 页面从0页开始,但需要从1页开始 当转到最后一页时,我无法返回到第1页 如果我将项目设置为例如每页5个,然后转到最后一页,然后选择每页100个项目,我没有看到任何项目,并且在关于页面的信息中显示为1页中的2页 请帮助我实现分页算法 页码:0, 页面大小:50, 页面大小:[ 5, 10, 20, 50, 100 ], UserScont(){ 返回this.isMappingsLoading?0:this.resolvedUsers.le
页码:0,
页面大小:50,
页面大小:[
5, 10, 20, 50, 100
],
UserScont(){
返回this.isMappingsLoading?0:this.resolvedUsers.length
},
页面计数(){
返回Math.ceil(this.userscont/this.pageSize)
},
paginatedData(){
const start=this.pageNumber*this.pageSize
const end=start+this.pageSize
返回此.filteredUsers.slice(开始,结束)
},
isPrevPageDisabled(){
返回此文件。页码
每页行数:
mdi V形左
{{pageInfo}}
mdi V形右
Hi
问题1
您可以轻松地使页码从1开始
解决方案
只需更改paginatedData()
函数,使其从0开始切片。
paginatedData(){
const start = (this.pageNumber - 1) * this.pageSize // --> here
const end = start + this.pageSize
return this.filteredUsers.slice(start, end)
},
并设置页码:1,
问题2
一旦1和3被纠正,问题2很可能会自行解决
问题3
正如@tgreen所建议的,当用户更改页面大小时,您应该设置this.pageNumber=1
。否则
如果您在第5页,并且用户更改了页面大小,根据上面的代码pageNumber
是不变的,您可以很容易地看到paginatedData()
将返回0。因此解释没有看到任何项目
解决方案
当用户更改pageSize
同时将isNextPageDisabled()
更改为此
isPrevPageDisabled() {
return this.pageNumber == 1
},
我们在应用程序中所做的一件事是,当用户更改页面大小时,自动转到第1页。这样,您就不会遇到第2页(共1页)上的问题。如果您的页码从0开始,则isPrevPageDisabled(){返回this.pageNumber^这并不能解决我的问题