一篇文章告诉你如何实现Vue前端分页和后端分页
目录
- 1：前端手写分页(数据量小的情况下)
- 2：后端分页，前端只需要关注传递的page和pageSize
- 总结
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+Element-ui前端实现分页效果的具体代码,供大家参考,具体内容如下 分页技术 分页技术的概念 分页就是将所有的数据分段展示给用户,用户看到的可能不是全部的数据,而是其中一部分,用户可以通过点击页码来查找自己需要的内容,也可以通过模糊查询获取符合内容的数据 分页的意义 分页确实有效,但它一定会加大系统的复杂度,但可否不分页呢?如果数据量少的话当然可以.但是对于企业信息系统来说数据量不会限制在一个小范围内.如果不顾一切的Select * from某个表,再将返回的数
-
vue实现前端分页完整代码
本文实例为大家分享了vue实现前端分页的具体代码,供大家参考,具体内容如下 首先,做出来的效果如图所示,具体的Ajax请求数据可以写在点击函数中 分页效果算是比较费脑子的,里面计算有些麻烦,本文上完整代码,一起学习进步 "上一页"写两个li元素,如果已经是第一页,那么就禁止鼠标点击,如果不是就curr减减,并且可以点击 同理"下一页"也一样 中间部分是通过indexs循环,indexs通过computed计算得出 <div class="page-b
-
Vue.js结合bootstrap前端实现分页和排序效果
写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 排
-
Vue分页插件的前后端配置与使用
本文实例为大家分享了Vue分页插件的前后端配置与使用,供大家参考,具体内容如下 分页插件的配置 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.10</version> </dependency> <dependency> <groupI
-
一篇文章告诉你如何实现Vue前端分页和后端分页
目录 1:前端手写分页(数据量小的情况下) 2:后端分页,前端只需要关注传递的page和pageSize 总结 1:前端手写分页(数据量小的情况下) 前端需要使用slice截取: tableData((page-1)pageSize,pagepageSize) 2:后端分页,前端只需要关注传递的page和pageSize 3:前端手写分页按钮 <body> <div id="app"> <table class="table table-bord
-
一篇文章告诉你如何编写Vue插件
目录 什么是插件 编写插件 使用插件 总结 什么是插件 在Vue框架中,如果需要给Vue增加一些我们需要的功能,Vue给我留了一个插件的方式,我们可以编写自己的插件,然后在Vue中去注册插件,然后去使用他. 通过Vue插件我们可以实现一些Vue框架没有的功能,也可以使用别人写好的插件,来帮助我们更快速的实现一些功能. 插件的功能范围并没有严格的要求,根据官方的示例来说,一般有下面几种: 1.添加全局方法或者属性,如:vue-custom-element,我们可以用插件方式添加一些全局组件,然后可
-
vue前端和Django后端如何查询一定时间段内的数据
前言 在开发过程中经常会遇到筛选查询之类的功能,比如查询某一个时间段内的数据而非所有数据. 这样我们就需要向后端发送时间段的参数,然后在后端处理查询. 这里以Django后端和vue前端的简单例子来记录大致实现. 后端数据库 这里是一些简单的数据重要的是date,我们需要根据日期来筛选返回到前端. models.py class CountDownSign(models.Model): name = models.CharField(max_length=1000) date = models.
-
vue前端优雅展示后端十万条数据面试点剖析
目录 前置工作 后端搭建 前端页面 直接渲染 setTimeout分页渲染 requestAnimationFrame 文档碎片 + requestAnimationFrame 懒加载 虚拟列表 前置工作 如果后端真的返回给前端10万条数据,咱们前端要怎么优雅地展示出来呢?(哈哈假设后端真的能传10万条数据到前端) 先把前置工作给做好,后面才能进行测试 后端搭建 新建一个server.js文件,简单起个服务,并返回给前端10w条数据,并通过nodemon server.js开启服务 没有安装no
-
layUI实现前端分页和后端分页
本文实例为大家分享了layUI实现前端分页和后端分页效果,供大家参考,具体内容如下 layui后端分页: function pagination(curr,gwayId,mlity,ePart) { $(".manage_ys_list").html('加载中...'); let dd={ conditions: { gatewayId:gwayId, searchText:"", pageSize:15, pageIndex:curr-1 }, identity:
-
一篇文章带你搞懂VUE基础知识
目录 VUE是什么 Vue中的核心插件 Vue Router Vuex axios element-ui Vue前端整体架构 总结 VUE是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. Vue使用了双向数据绑定,即
-
一篇文章带你搞懂Vue虚拟Dom与diff算法
前言 使用过Vue和React的小伙伴肯定对虚拟Dom和diff算法很熟悉,它扮演着很重要的角色.由于小编接触Vue比较多,React只是浅学,所以本篇主要针对Vue来展开介绍,带你一步一步搞懂它. 虚拟DOM 什么是虚拟DOM? 虚拟DOM(Virtual Dom),也就是我们常说的虚拟节点,是用JS对象来模拟真实DOM中的节点,该对象包含了真实DOM的结构及其属性,用于对比虚拟DOM和真实DOM的差异,从而进行局部渲染来达到优化性能的目的. 真实的元素节点: <div id="wr
-
一篇文章教你简单使用Vue的watch侦听器
目录 侦听器watch 格式 设置侦听器: 总结 侦听器watch 函数名就是要侦听的元素的名字 传入的参数第一个是变化后的新值newval,第二个是变化前的旧值oldval 格式 方法格式的侦听器 无法在刚进入页面时自动触发,只有在侦听到变化才会触发 如果侦听的是对象,当对象的属性发生变化时,不会侦听到 对象格式的侦听器 通过immediate选项,可以让侦听器自动触发 通过deep选项,使侦听器深度侦听到对象中属性的变化 这是Vue实例中的data对象: 设置侦听器: 下面分别是方法格
-
一篇文章告诉你Vue3指令是如何实现的
目录 前言 指令注册 全局注册 组件内注册 指令搜寻 指令搜寻的时机 指令搜寻的逻辑 指令绑定VNode 指令调用 关于指令的思考 组件上使用指令 组件上的一些使用场景 总结 前言 Vue 指令 是指 对普通DOM元素进行底层操作的JS对象, 它们会被挂在Element VNode对象上,在Element VNode的一些生命周期中会被调用,从而可以操作Element VNode的底层DOM元素. 指令注册 指令注册 是指将指令对应的JS代码放置在某些地方,需要使用的时候可以在这些地方进行查找.
-
一篇文章告诉你JAVA Mybatis框架的核心原理到底有多重要
目录 持久层的那些事 什么是 JDBC JDBC 原理 什么是 Mybatis Mybatis 与 JDBC 的关系 SqlSession SqlSessionFactory SqlSessionFactoryBuilder Configuration MappedStatement Executor ParameterHandler StatementHandler ResultSetHandler Interceptor Mybatis 关键词说明 Mybatis 架构设计 基础支持层 反射