分页计算公式(vue实现分页效果)

最新推荐文章于 2024-04-10 22:15:53 发布
最新推荐文章于 2024-04-10 22:15:53 发布
阅读量2k 收藏 4
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45145768/article/details/116051190
版权

文章目录

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果

在这里插入图片描述

二、分页相关公式

已知量:

  • 当前页: current
  • 每页条数: pageSize
  • 总条数: total
  • 总页数: total/pageSIze + 1
  • 当前页第一条: total/pageSIze + 1
  • 当前页最后一条: (需要做判断: 当前页是否为最后一页)
    current != total/pageSIze + 1?current=total/pageSIze + 1:total
    这里使用了三目运算符,也可以用if-else均可

三、前端页面实现


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Stargazer（仰望星空）
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    4
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
分页公式

				
			

			

				

					weixin_33850015的博客
				

				

					08-10
					
					1695
					
				

			

		

		

			
				
为什么80%的码农都做不了架构师？>>> 
                                        
                ...

			
		

	



                

              
                



	

		

			

				
					
Vue项目中常见问题(30)分页器起始与结束数字计算

				
			

			

				

					qq_46368050的博客
				

				

					05-18
					
					912
					
				

			

		

		

			
				
目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

分析:

1.测试分页器阶段,这里数据将来需要替换的

2.在components/Pagination/index.vue中

3.总数据条数和总页数页面的显示

4.算出:连续页面起始数字和结束数字





gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史...

			
		

	



                


  
              

                


	

		

			

				
					
分页计算公式

				
			

			

				

					weixin_53314414的博客
				

				

					09-09
					
					284
					
				

			

		

		

			
				
分页计算公式

			
		

	





	

		

			

				
					
分页公式以及分页导航栏总结

				
			

			

				

					fxsjy的专栏
				

				

					06-04
					
					2237
					
				

			

		

		

			
				
在实际编程中，经常需要把大量数据分页显示，并且要提供一个分页导航栏供用户选择。现总结出一个用于常规分页的公式，这个公式比较简洁而且具有普适性。页数=(记录总数+每页记录数-1)/ 每页记录数注意，这里的除法是整除。举例验证，假设总记录数为10条，要求每页显示5条，则页数=(10+5-1)/5=2。若总记录数改为11条，仍然要求每页显示5条，则页数=(11+5-1)/5=3。这与实际情况是如

			
		

	



		

			
		



	

		

			

				
					
js前端计算分页

					
最新发布

				
			

			

				

					钱端猿的博客
				

				

					04-10
					
					322
					
				

			

		

		

			
				
这个函数接受总数据量、当前页码和每页条目数作为参数，计算并返回相应的分页信息。在实际应用中，你可以根据这些信息来显示分页控件，并请求对应页码的数据。要在前端计算分页，你需要知道总数据量、每页显示的条目数和当前页码。

			
		

	





	

		

			

				
					
vue实现分页

				
			

			

				

					QYY的博客
				

				

					09-01
					
					219
					
				

			

		

		

			
				
相较于原生js的分页，四个基本参数相同，start和end的计算逻辑相同，优点是利用数据的实时响应，避免频繁修改参数，减少代码量。

			
		

	





	

		

			

				
					
vue 数据手写分页算法，定时展示

				
			

			

				

					weixin_54902466的博客
				

				

					12-07
					
					958
					
				

			

		

		

			
				
数组手写分页算法 ， 加上实时展示

			
		

	





	

		

			

				
					
前端如何实现分页？

					
热门推荐

				
			

			

				

					m0_50441807的博客
				

				

					06-06
					
					1万+
					
				

			

		

		

			
				
先定义分页中需要用的三个值：currentPage（当前页码）、total（总条数）、pageSize（每页展示的数据量）
分页的思路：把所有的数据请求回来后，通过来进行截取每一页的数据；假设当前页是，，那么应该从开始截取，到结束，自己验证下，找到这样的规律后，就可以截取每一页的数据了；......

			
		

	





	

		

			

				
					
Vue实现简单分页器

				
			

			

				

					10-17
				

			

		

		

			
				
6. **计算属性与方法**：Vue的计算属性可以帮助我们根据现有数据计算出其他值，比如根据总页数和当前页计算出分页链接。此外，还可以定义方法来处理用户交互，如跳转到指定页码。  7. **使用组件**：在Vue实例的根...

			
		

	





	

		

			

				
					
基于vue实现分页效果

				
			

			

				

					08-28
				

			

		

		

			
				
基于Vue实现分页效果  基于Vue实现分页效果是指使用 Vue.js 框架来实现分页功能，以便更好地组织和展示大量数据。以下是相关知识点的总结：  1. 分页的基本概念：分页是指将大量数据分割成多个页面，以便更好地组织...

			
		

	





	

		

			

				
					
vue+Element-ui实现分页效果实例代码详解

				
			

			

				

					10-17
				

			

		

		

			
				
Vue.js是一个轻量级的前端框架，它结合Element UI库可以轻松实现高效的分页效果。Element UI提供了丰富的组件，其中包括`Pagination`分页组件，使得开发者能够快速实现美观且功能完善的分页功能。  在Vue+Element UI...

			
		

	





	

		

			

				
					
利用vue + element实现表格分页和前端搜索的方法

				
			

			

				

					10-18
				

			

		

		

			
				
众所周知Element 是一套 Vue.js 后台组件库，它能够帮助你更轻松更快速地开发后台项目。下面这篇文章主要给大家介绍了关于利用vue + element实现表格分页和前端搜索的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。

			
		

	





	

		

			

				
					
vue实现分页栏效果

				
			

			

				

					12-03
				

			

		

		

			
				
本文实例为大家分享了vue实现分页栏效果的具体代码，供大家参考，具体内容如下 当我们在获取后台数据时，特别是获取大量的列表数据时，页面内能展示的数据不能过多，不然让用户看起来很疲惫，体验度不高。这个时候就...

			
		

	





	

		

			

				
					
分享一个分页计算的小公式

				
			

			

				

					weixin_33901641的博客
				

				

					04-29
					
					188
					
				

			

		

		

			
				
以前做分页，经常还需要用if来判断总页数，现在不用啦，一个公式即可：
P = (T - 1)/R + 1
也就是总页数 = (总记录数 - 1) / 每页的记录数 + 1
比如99条记录，每页10条，就有10页；
如果有100条记录，每页10条，公式算出来的仍然是10页；
额，如果记录数为0的话，呵呵，你就不能先判断一下记录数嘛~~~
...

			
		

	





	

		

			

				
					
分页加载总页数计算公式

				
			

			

				

					lvshuchangyin的专栏
				

				

					08-17
					
					1万+
					
				

			

		

		

			
				
例：
内容总数量为：totalCount
每页加载数量为：loadCount


所求总页数为：totalPage 


第一种算法：
totalPage = totalCount% loadCount== 0 ? totalCount/ loadCount : totalCount/ loadCount+ 1 ;



第二种算法：(简便，推荐)
totalPage 

			
		

	





	

		

			

				
					
vue 简单分页

				
			

			

				

					小小程序猿
				

				

					05-23
					
					1401
					
				

			

		

		

			
				
vue-nav.js的代码/**
 * pageNum 注意大小写。
 */
(function(){
    var tm = '<div >'+
    	'<div class="page-bar"  v-if="pages">'+
        '<ul>'+
        '<li v-if="pagenum!=1">&am

			
		

	





	

		

			

				
					
js根据数据条数与每页多少条数据计算页数，js前端计算页数

				
			

			

				

					wu7zhi的博客
				

				

					04-18
					
					7190
					
				

			

		

		

			
				
js根据数据条数与每页多少条数据计算页数，js前端计算页数

			
		

	





	

		

			

				
					
后端分页，前端vue如何实现所有全选效果

				
			

			

				

					03-28
				

			

		

		

			
				
在前端Vue中实现全选效果，可以通过以下步骤：

1. 在Vue组件中定义一个数据项，用于记录是否全选。

```
data() {
  return {
    allChecked: false,
    items: [] // 分页数据列表
  }
}
```

2. 在模板中添加一个全选的复选框，绑定到allChecked数据项上。

```
<template>
  <div>
    <input type="checkbox" v-model="allChecked" @change="onAllCheckedChange">
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="allChecked" @change="onAllCheckedChange"></th>
          <th>名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items">
          <td><input type="checkbox" v-model="item.checked" @change="onItemCheckedChange(item)"></td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
```

3. 在Vue组件中定义一个全选的方法，用于设置所有分页数据项的选中状态，并更新allChecked数据项的值。

```
methods: {
  onAllCheckedChange() {
    this.items.forEach(item => {
      item.checked = this.allChecked;
    });
  },
  onItemCheckedChange(item) {
    if (!item.checked) {
      this.allChecked = false;
    } else {
      this.allChecked = this.items.every(item => item.checked);
    }
  }
}
```

4. 在每个分页数据项中添加一个checked数据项，用于记录该项是否选中。

```
data() {
  return {
    allChecked: false,
    items: [
      { name: '商品1', price: 100, checked: false },
      { name: '商品2', price: 200, checked: false },
      { name: '商品3', price: 300, checked: false }
    ]
  }
}
```

5. 在每个分页数据项的复选框中绑定到checked数据项上，并添加一个方法，用于在选中状态发生变化时更新allChecked数据项的值。

```
<template>
  <tr>
    <td><input type="checkbox" v-model="item.checked" @change="onItemCheckedChange(item)"></td>
    <td>{{ item.name }}</td>
    <td>{{ item.price }}</td>
  </tr>
</template>

methods: {
  onItemCheckedChange(item) {
    if (!item.checked) {
      this.allChecked = false;
    } else {
      this.allChecked = this.items.every(item => item.checked);
    }
  }
}
```

这样，就可以在前端Vue中实现所有全选效果了。

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值