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


Posted in Vue.js onFebruary 18, 2022

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

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

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

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

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

3:前端手写分页按钮

<body>
  <div id="app">
    <table class="table table-bordered table-condensed">
      <tr class="bg-primary">
        <th class="text-center">排序</th>
        <th class="text-center">用户姓名</th>
        <th class="text-center">用户性别</th>
        <th class="text-center">所在城市</th>
      </tr>
      <tr class="text-center active"  v-for="(v,i) in list" :key="i">
        <td>{{num(i)}}</td>
        <!-- <td>{{params.pagesize}}</td> -->
        <td>{{v.name}}</td>
        <td>{{v.sex}}</td>
        <td>{{v.addr}}</td>
      </tr>       
    </table>
    <nav aria-label="Page navigation" style="text-align: center;">
      <ul class="pagination">
        <!-- 上一页 -->
        <li @click="prePage()" :class="{'disabled':params.page == 1}">
          <a aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li :class="{'active': params.page == page}" v-for="(page,index) in pages" :key="index" @click="curPage(page)">
          <a  style="cursor: pointer;">
            {{page}}
          </a>
        </li>
        <!-- 下一页 -->
        <li :class="{'disabled':params.page == totalPage}" @click="next()">
          <a aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</body>
window.onload = function () {
  // 1s内只允许发送请求(出发事件)一次(可多次点击) 节流 throttle
  new Vue({
    el: '#app',
    data: {
      params:{
        page:1,
        pagesize:20,
        name:''
      },
      list: [],
      total:0,//总的条数
      totalPage:0,//总的页数
      flag: false,
    },
    created() {
      this.getData()
    },
    computed: {
      pages() {
        let totalPage = this.totalPage;
        let page = this.params.page;
        // 总的页数小于10页
        if(totalPage < 10) return totalPage;
        // 总的页数大于10页添加省略号
        if(page <= 5) { // 前五页
          // (1) 页码小于5 左边显示六个
          return [1,2,3,4,5,6,'...',totalPage]
        } else if (page >= totalPage - 5) { // 后五页
          console.log("触发")
          // (2) 页码大于总页数-5 右边显示六个
          return [1,'...',totalPage-5,totalPage-4,totalPage-3,totalPage-2,totalPage-1,totalPage]
        } else { // 中间五页
          // (3)页码在 5-(totalPage-5)之间 左边区间不能小于5  右边区间不能大于总页数totalPage,注意  左边的当前页-num 不能小于1, 右边的当前页+num不能大于总页数
          return [1,'...',page-1,page,page+1,page+2,page+3,'...',totalPage]
        }
      },
      num() {
        let { pagesize, page} = this.params
        // (1-1) * 10 + 10 + 0 + 1 = 1;
        // (2-1) * 10 + 10 + 0 + 1 = 11 
        // 第一页 = (当前页 -1 )* 每页的条数 + 索引值 + 1 保证是从1开始的
        return i => (page - 1) * pagesize + i + 1  // (当前页- 1 * 每页的条数) + 索引值 + 1
      }
    },
    methods: {
      getData() {
        if(this.flag) return;
        this.flag = true;
        // 下面就是相当于一个定时器
        axios.get('http://localhost:3000/user/listpage',{params:this.params}).then(res => {
          console.log('res',res.data.users)
          let { total,users } = res.data.users;
          this.total = total;
          this.totalPage = Math.ceil( this.total / this.params.pagesize);
          this.list = users
          this.flag = false;
        })
      },
      curPage(page) {
        if(page == '...') return 
        if(this.flag) return;
        this.params.page = page;
        this.getData()
      },
      prePage() {
        // if(this.params.page == '...') return 
        if(this.params.page > 1) {
          if(this.flag) return;
          --this.params.page;
          console.log('page',this.params.page)
          this.getData()
        }
      },
      next() {
        // if(this.params.page == '...') return 
        if(this.flag) return;
        console.log("执行",this.totalPage)
        if(this.params.page < this.totalPage) {
          ++this.params.page;
          console.log('page',this.params.page)
          this.getData()
        }
      },
     } 
  })
}

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

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Vue.js 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
详解Vue的mixin策略
Nov 19 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
vue3获取当前路由地址
Feb 18 #Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 #Vue.js
vue项目支付功能代码详解
Feb 18 #Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 #Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 #Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 #Vue.js
You might like
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python转换时间的图文方法
2019/07/01 Python
python实现静态服务器
2019/09/05 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
Python流程控制语句的深入讲解
2020/06/15 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
JPA的优势都有哪些
2013/07/04 面试题
五一服装活动方案
2014/01/11 职场文书
班主任班级寄语大全
2014/04/04 职场文书
公司委托书格式
2014/08/01 职场文书
销售2014年度工作总结
2014/12/08 职场文书
西安兵马俑导游词
2015/02/02 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python