• 售前

  • 售后

热门帖子
入门百科

一篇文章告诉你怎样实现Vue前端分页和后端分页

[复制链接]
李松泰李c 显示全部楼层 发表于 2022-1-8 04:11:39 |阅读模式 打印 上一主题 下一主题
目录


  • 1:前端手写分页(数据量小的环境下)
  • 2:后端分页,前端只须要关注传递的page和pageSize
  • 总结

1:前端手写分页(数据量小的环境下)

前端须要使用slice截取: tableData((page-1)pageSize,pagepageSize)



2:后端分页,前端只须要关注传递的page和pageSize

3:前端手写分页按钮
  1. <body>
  2.   <div id="app">
  3.     <table class="table table-bordered table-condensed">
  4.       <tr class="bg-primary">
  5.         <th class="text-center">排序</th>
  6.         <th class="text-center">用户姓名</th>
  7.         <th class="text-center">用户性别</th>
  8.         <th class="text-center">所在城市</th>
  9.       </tr>
  10.       <tr class="text-center active"  v-for="(v,i) in list" :key="i">
  11.         <td>{{num(i)}}</td>
  12.         <!-- <td>{{params.pagesize}}</td> -->
  13.         <td>{{v.name}}</td>
  14.         <td>{{v.sex}}</td>
  15.         <td>{{v.addr}}</td>
  16.       </tr>      
  17.     </table>
  18.     <nav aria-label="Page navigation" style="text-align: center;">
  19.       <ul class="pagination">
  20.         <!-- 上一页 -->
  21.         <li @click="prePage()" :class="{'disabled':params.page == 1}">
  22.           <a aria-label="Previous">
  23.             <span aria-hidden="true">&laquo;</span>
  24.           </a>
  25.         </li>
  26.         <li :class="{'active': params.page == page}" v-for="(page,index) in pages" :key="index" @click="curPage(page)">
  27.           <a  style="cursor: pointer;">
  28.             {{page}}
  29.           </a>
  30.         </li>
  31.         <!-- 下一页 -->
  32.         <li :class="{'disabled':params.page == totalPage}" @click="next()">
  33.           <a aria-label="Next">
  34.             <span aria-hidden="true">&raquo;</span>
  35.           </a>
  36.         </li>
  37.       </ul>
  38.     </nav>
  39.   </div>
  40. </body>
复制代码
  1. window.onload = function () {
  2.   // 1s内只允许发送请求(出发事件)一次(可多次点击) 节流 throttle
  3.   new Vue({
  4.     el: '#app',
  5.     data: {
  6.       params:{
  7.         page:1,
  8.         pagesize:20,
  9.         name:''
  10.       },
  11.       list: [],
  12.       total:0,//总的条数
  13.       totalPage:0,//总的页数
  14.       flag: false,
  15.     },
  16.     created() {
  17.       this.getData()
  18.     },
  19.     computed: {
  20.       pages() {
  21.         let totalPage = this.totalPage;
  22.         let page = this.params.page;
  23.         // 总的页数小于10页
  24.         if(totalPage < 10) return totalPage;
  25.         // 总的页数大于10页添加省略号
  26.         if(page <= 5) { // 前五页
  27.           // (1) 页码小于5 左边显示六个
  28.           return [1,2,3,4,5,6,'...',totalPage]
  29.         } else if (page >= totalPage - 5) { // 后五页
  30.           console.log("触发")
  31.           // (2) 页码大于总页数-5 右边显示六个
  32.           return [1,'...',totalPage-5,totalPage-4,totalPage-3,totalPage-2,totalPage-1,totalPage]
  33.         } else { // 中间五页
  34.           // (3)页码在 5-(totalPage-5)之间 左边区间不能小于5  右边区间不能大于总页数totalPage,注意  左边的当前页-num 不能小于1, 右边的当前页+num不能大于总页数
  35.           return [1,'...',page-1,page,page+1,page+2,page+3,'...',totalPage]
  36.         }
  37.       },
  38.       num() {
  39.         let { pagesize, page} = this.params
  40.         // (1-1) * 10 + 10 + 0 + 1 = 1;
  41.         // (2-1) * 10 + 10 + 0 + 1 = 11
  42.         // 第一页 = (当前页 -1 )* 每页的条数 + 索引值 + 1 保证是从1开始的
  43.         return i => (page - 1) * pagesize + i + 1  // (当前页- 1 * 每页的条数) + 索引值 + 1
  44.       }
  45.     },
  46.     methods: {
  47.       getData() {
  48.         if(this.flag) return;
  49.         this.flag = true;
  50.         // 下面就是相当于一个定时器
  51.         axios.get('http://localhost:3000/user/listpage',{params:this.params}).then(res => {
  52.           console.log('res',res.data.users)
  53.           let { total,users } = res.data.users;
  54.           this.total = total;
  55.           this.totalPage = Math.ceil( this.total / this.params.pagesize);
  56.           this.list = users
  57.           this.flag = false;
  58.         })
  59.       },
  60.       curPage(page) {
  61.         if(page == '...') return
  62.         if(this.flag) return;
  63.         this.params.page = page;
  64.         this.getData()
  65.       },
  66.       prePage() {
  67.         // if(this.params.page == '...') return
  68.         if(this.params.page > 1) {
  69.           if(this.flag) return;
  70.           --this.params.page;
  71.           console.log('page',this.params.page)
  72.           this.getData()
  73.         }
  74.       },
  75.       next() {
  76.         // if(this.params.page == '...') return
  77.         if(this.flag) return;
  78.         console.log("执行",this.totalPage)
  79.         if(this.params.page < this.totalPage) {
  80.           ++this.params.page;
  81.           console.log('page',this.params.page)
  82.           this.getData()
  83.         }
  84.       },
  85.      }
  86.   })
  87. }
复制代码


总结

本篇文章就到这里了,希望可以或许给你带来资助,也希望您可以或许多多关注草根技术分享的更多内容!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作