一篇文章告诉你如何实现Vue前端分页和后端分页
更新时间：2022-01-27 14:11:53 作者：佚名 
我要评论(0)
目录1：前端手写分页(数据量小的情况下)2：后端分页，前端只需要关注传递的page和pageSize总结1：前端手写分页(数据量小的情况下)
前端需要使
前端需要使
1：前端手写分页(数据量小的情况下)
前端需要使用slice截取： tableData((page-1)pageSize,pagepageSize)
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">«</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">»</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+Element-ui前端实现分页效果
- vue实现前端分页完整代码
- Vue.js结合bootstrap前端实现分页和排序效果
- Vue分页插件的前后端配置与使用
您可能感兴趣的文章:
相关文章
- 目录1：前端手写分页(数据量小的情况下)2：后端分页，前端只需要关注传递的page和pageSize总结1：前端手写分页(数据量小的情况下) 前端需要使2022-01-27
javascript的var与let,const之间的区别详解
目录作为全局变量时变量提升暂时性死区块级作用域重复声明修改声明的变量（常量与变量声明）总结说到JavaScript中声明变量的几种方法也就是v2022-01-27- 目录1. gojs 简介2. gojs 应用场景3. 为什么选用 gojs:4. gojs 上手指南5. 小技巧（非常实用哦）6. 实践：实现节点分组关系可视化交互图最后2022-01-27
- 目录简介示例：事件委托写法1：事件委托写法2：每个子元素都绑定事件示例：新增元素写法1：事件委托写法2：每个子元素都绑定事件简介 说明 本2022-01-27
- 目录一、gojs 实现1. 绘图2. 虚线实现3. 让虚线动起来二、虚线及虚线动画背后的原理三、虚线的一些概念四、css 绘制边框虚线在绘制 dag 图时2022-01-27
- 目录1、实现效果2、后端实现2.1 实体类2.2 数据库中的数据结构2.3 后端接口2.4 swagger测试后端结构功能是否正常3、前端实现3.1 页面中引入e2022-01-27
vue3+TypeScript+vue-router的使用方法
目录简单使用创建项目vue-cli创建vite创建安装vue-router创建/修改组件修改入口ts启动vue在浏览器中访问文件结构图片综合使用动态参数使用wa2022-01-27- JS script标签有哪些属性： charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值因此这个属性很少有人用。def2022-01-27
- 目录一、安装vue-video-player二、使用 vue-video-player课前准备：直播流协议https://www.cnblogs.com/yangchin9/p/14930874.html 摘要：在2022-01-27
- 正解 使用useRouter: // router的 path: "/user/:uid" <template> <div>user</div> <p>uid: {{ uid }}</p> </template> <script lang=2022-01-27
最新评论