vue如何做分页？
原创作品转载请注明出处
先来看一下效果图： 
功能描述：
1. 点击页面序号跳转到相应页面；
2. 点击单左/单右，向后/向前跳转一个页面；
3. 点击双左/双右，直接跳转到最后一页/第一页；
3. 一次显示当前页面的前三个与后三个页面；
4. 始终显示最后一个页面；
HTML：
<!-- 分页开始 -->
<div class="u-pages" style="margin-bottom:20px; margin-top:10px;">
<ul>
<li v-if="showPre" class="crt"><a v-on:click="jumpFirst(cur)"> << </a></li>
<li v-if="showPre" class="crt"><a v-on:click="minus(cur)"> < </a></li>
<template v-for="index in indexs" >
<li class="{{classRenderer(index)}}">
<a v-on:click="btnClick(index)" >{{index}}</a>
</li>
</template>
<li v-if="showMoreTail" class="crt">..</li>
<li class="{{classRenderer(pageNo)}}"><a @click="btnClick(pageNo)">{{pageNo}}</a></li>
<li v-if="showTail" class="crt"><a v-on:click="plus(cur)">></a></li>
<li v-if="showTail" class="crt"><a v-on:click="jumpTail(cur)">>></a></li>
</ul>
</div>
<!-- 分页结束 -->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
HTML方法分析：
1、<li class="{{classRenderer(index)}}">
classRenderer()方法实现了当点击页面索引是，点击页面获得选中效果
2、<a v-on:click="btnClick(index)" >{{index}}</a>
btnClick()方法，实现了点击页面索引，跳转到相应页面
3、showPre showTail
showPre控制跳转到第一页与跳转到前一页的按钮的显示与消除
showTail控制跳转到最后一页与跳转到后一页的按钮的显示与消除
4、cur
记录当前页序号
5、jumpFirst(cur) minus(cur) plus(cur) jumpTail(cur)
实现按钮跳转功能
JS：
module.exports = {
data: function () {
return {
cur:1,
showTail:true,
showMorePre: false,
showMoreTail: false,
}
},
methods:{
jumpFirst:function(data){
var $this = this;
data = 1;
$this.cur = data;
if (data == 1 )
{
$this.$set("showPre", false);
}else
{
$this.$set("showPre", true);
}
$this.$am.ajax({
url:window.$ApiConf.api_order_detail_list,
type:'GET',
data:{start: 1},
success: function(data){
console.log(data);
$this.$set("records", data.record.records);
$this.$set("start", data.record.query.start);
$this.$set("total", data.record.query.total);
$this.$set("limit", data.record.query.limit);
}
})
$this.$set("showTail", true);
return data;
},
minus:function(data){
var $this = this;
data--;
$this.cur = data;
$this.$set("showTail", true);
if(data == 1){
$this.$set("showPre", false);
}else{
$this.$set("showPre", true);
}
$this.$am.ajax({
url:window.$ApiConf.api_order_detail_list,
type:'GET',
data:{start: 1 + $this.limit * (data-1) },
success:function(data){
console.log(data);
$this.$set("records", data.record.records);
$this.$set("start", data.record.query.start);
$this.$set("total", data.record.query.total);
$this.$set("limit", data.record.query.limit);
}
})
return data;
},
plus: function(data){
var $this = this;
data++;
$this.cur = data;
$this.$set("showPre", true);
if (data == $this.pageNo)
{
$this.$set("showTail", false);
}else
{
$this.$set("showTail", true);
}
$this.$am.ajax({
url:/* 这里写上你自己请求数据的路径 */,
type:'GET',
data:{start: 1 + $this.limit * (data-1) },
success:function(data){
console.log(data);
$this.$set("records", data.record.records);
$this.$set("start", data.record.query.start);
$this.$set("total", data.record.query.total);
$this.$set("limit", data.record.query.limit);
}
})
return data;
},
classRenderer:function(index){
var $this = this;
var cur = $this.cur;
if(index != cur){
return 'crt';
}
return '';
},
btnClick:function(data){
var $this = this;
if(data == 1){
$this.$set("showPre", false);
}else{
$this.$set("showPre", true);
}
if (data == $this.pageNo)
{
$this.$set("showTail", false);
}else
{
$this.$set("showTail", true);
}
if (data != $this.cur)
{
$this.cur = data;
$this.$am.ajax({
url:window.$ApiConf.api_order_detail_list,
type:'GET',
data:{start: 1 + $this.limit * (data-1) },
success:function(data){
console.log(data);
$this.$set("records", data.record.records);
$this.$set("start", data.record.query.start);
$this.$set("total", data.record.query.total);
$this.$set("limit", data.record.query.limit);
}
})
}
},
jumpTail:function(data){
var $this = this;
data = $this.pageNo;
$this.cur = data;
if (data == $this.pageNo)
{
$this.$set("showTail", false);
}else
{
$this.$set("showTail", true);
}
$this.$am.ajax({
url:window.$ApiConf.api_order_detail_list,
type:'GET',
data:{start: 1 + $this.limit * (data-1) },
success:function(data){
console.log(data);
$this.$set("records", data.record.records);
$this.$set("start", data.record.query.start);
$this.$set("total", data.record.query.total);
$this.$set("limit", data.record.query.limit);
}
})
$this.$set("showPre", true);
return data;
},
computed: {
//*********************分页开始******************************//
indexs: function(){
var $this = this;
var ar = [];
if ($this.cur > 3)
{
ar.push($this.cur - 3);
ar.push($this.cur - 2);
ar.push($this.cur - 1);
}else
{
for (var i = 1; i < $this.cur; i++)
{
ar.push(i);
}
}
if ($this.cur != $this.pageNo)
{
ar.push($this.cur);
}
if ( $this.cur < ( $this.pageNo - 3 ) )
{
ar.push($this.cur + 1);
ar.push($this.cur + 2);
ar.push($this.cur + 3);
if ( $this.cur < ( $this.pageNo - 4 ) )
{
$this.$set("showMoreTail", true);
}
}else
{
$this.$set("showMoreTail", false);
for (var i = ($this.cur + 1); i < $this.pageNo; i++)
{
ar.push(i);
}
}
return ar;
}
//*********************分页结束******************************//
}
} module.exports = { data: function () { return { cur:1, showTail:true, showMorePre: false, showMoreTail: false, } }, methods:{ jumpFirst:function(data){ var$this= this; data=1; $this.cur=data; if (data==1 ) { $this.$set("showPre", false); }else { $this.$set("showPre", true); } $this.$am.ajax({ url:window.$ApiConf.api_order_detail_list, type:'GET', data:{start: 1}, success: function(data){ console.log(data); $this.$set("records", data.record.records); $this.$set("start", data.record.query.start); $this.$set("total", data.record.query.total); $this.$set("limit", data.record.query.limit); } }) $this.$set("showTail", true); returndata; }, minus:function(data){ var$this= this; data--; $this.cur=data; $this.$set("showTail", true); if(data==1){ $this.$set("showPre", false); }else{ $this.$set("showPre", true); } $this.$am.ajax({ url:window.$ApiConf.api_order_detail_list, type:'GET', data:{start: 1+$this.limit* (data-1) }, success:function(data){ console.log(data); $this.$set("records", data.record.records); $this.$set("start", data.record.query.start); $this.$set("total", data.record.query.total); $this.$set("limit", data.record.query.limit); } }) returndata; }, plus: function(data){ var$this= this; data++; $this.cur=data; $this.$set("showPre", true); if (data==$this.pageNo) { $this.$set("showTail", false); }else { $this.$set("showTail", true); } $this.$am.ajax({ url:/* 这里写上你自己请求数据的路径 */, type:'GET', data:{start: 1+$this.limit* (data-1) }, success:function(data){ console.log(data); $this.$set("records", data.record.records); $this.$set("start", data.record.query.start); $this.$set("total", data.record.query.total); $this.$set("limit", data.record.query.limit); } }) returndata; }, classRenderer:function(index){ var$this= this; var cur =$this.cur; if(index != cur){ return'crt'; } return''; }, btnClick:function(data){ var$this= this; if(data==1){ $this.$set("showPre", false); }else{ $this.$set("showPre", true); } if (data==$this.pageNo) { $this.$set("showTail", false); }else { $this.$set("showTail", true); } if (data!=$this.cur) { $this.cur=data; $this.$am.ajax({ url:window.$ApiConf.api_order_detail_list, type:'GET', data:{start: 1+$this.limit* (data-1) }, success:function(data){ console.log(data); $this.$set("records", data.record.records); $this.$set("start", data.record.query.start); $this.$set("total", data.record.query.total); $this.$set("limit", data.record.query.limit); } }) } }, jumpTail:function(data){ var$this= this; data=$this.pageNo; $this.cur=data; if (data==$this.pageNo) { $this.$set("showTail", false); }else { $this.$set("showTail", true); } $this.$am.ajax({ url:window.$ApiConf.api_order_detail_list, type:'GET', data:{start: 1+$this.limit* (data-1) }, success:function(data){ console.log(data); $this.$set("records", data.record.records); $this.$set("start", data.record.query.start); $this.$set("total", data.record.query.total); $this.$set("limit", data.record.query.limit); } }) $this.$set("showPre", true); returndata; }, computed: { //*********************分页开始******************************// indexs: function(){ var$this= this; var ar =[]; if ($this.cur > 3) { ar.push($this.cur - 3); ar.push($this.cur - 2); ar.push($this.cur - 1); }else { for (var i = 1; i < $this.cur; i++) { ar.push(i); } } if ($this.cur != $this.pageNo) { ar.push($this.cur); } if ( $this.cur < ( $this.pageNo - 3 ) ) { ar.push($this.cur + 1); ar.push($this.cur + 2); ar.push($this.cur + 3); if ( $this.cur < ( $this.pageNo - 4 ) ) { $this.$set("showMoreTail", true); } }else { $this.$set("showMoreTail", false); for (var i = ($this.cur + 1); i < $this.pageNo; i++) { ar.push(i); } } return ar; } //*********************分页结束******************************// } }
vue如何做分页？的更多相关文章
- vue element-ui 做分页功能之封装
在 vue 项目中的 components 中 创建一个 文件夹,文件夹里创建一个 name(这个名字你随意取).vue <template> <div class=" ...
- 用PHP+MySQL来做分页的演示
用php做分页弄懂逻辑关系其实不难,不过我在听课的时候估计是被老师讲的那些变量里的英文单词给听懵了,因为有几个变量的名字都很像,只是换了两三个英文字母而已,有的就少几个这样的,听到一半已经不知道老师讲 ...
- Ajax做分页
Ajax做分页 用这种ajax做分页的方法比较简单,把代码直接复制就可以,然后根据实际更改一下里面的参数. .设置分页显示显示的样式,显示效果如下. 复制代码 <style type=" ...
- 使用PHP做分页查询（查询结果也显示为分页）
1.先把数据库里所有的数据分页显示在页面,并在显示数据的表格上方加上查询表单.(加上条件,实现目标结果.) <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 关于使用coreseek并为其做分页的介绍(转)
coreseek 做分页时找数据总量还真不好找.以为他会给一个方法(函数)什么的去获取,结果却不是.首先需要了解:num_matches: 当前返回的结果数,<= limit设置值.max_ma ...
- angular -- 无刷新做分页
无刷新做分页参考地址: http://www.jq22.com/demo/angular201707111100/ 示例代码: <!DOCTYPE html> <html lang= ...
- easyui grid 本地做分页
背景: 有的数据不是很多,但是有分页的需求,这个时候后台往往没有做分页,我们是一次请求了所有的数据. 代码: dataSource 为 grid 里的数据源 html部分: <table id= ...
- vue+element-ui 实现分页（根据el-table内容变换的分页）
官方例子 官方提示: 设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示.prev表示上一页,next为下一页,pager表示页码列表,除此以外还提供了jumper和total,si ...
- vue+elementUI实现 分页表格的单选或者多选、及禁止部分选择
一.vue+elementUI实现 分页表格前的多选 多选效果图: 代码如下: <el-table ref="multipleTable" :data="listD ...
随机推荐
- Topcoder SRM 144 DIV 1
BinaryCode 模拟 题意是:定义串P,Q,其中Q[i]=P[i-1]+P[i]+P[i+1],边界取0,并且P必须是01串.现在给你Q,让你求出P. 做法是:枚举第一位是1还是0,然后就可以推 ...
- P1243~P1247 线段树模板题总结
前言 这几天刚刚刷了5道线段树(水)题,现在来总结一下. 首先是犯的不少错误: 1.建树.更新函数没有return.这是最气的,每次最后程序错误查了半天也没查出来,最后发现是没有return.递归边界 ...
- 363. Max Sum of Rectangle No Larger Than K
/* * 363. Max Sum of Rectangle No Larger Than K * 2016-7-15 by Mingyang */ public int maxSumSubmatri ...
- Context都没弄明白，还怎么做Android开发？
Activity mActivity =new Activity() 作为Android开发者,不知道你有没有思考过这个问题,Activity可以new吗?Android的应用程序开发采用JAVA语言 ...
- mysql count(*) 和count(1)区别
count *更快, 不要加where,否则同count(1)效率相同 sql语句对大小写不敏感,关键字一般大写,其他小写, count(*)不加where,mysql会直接返回总条数,因为mysql ...
- OSG(OpenSceneGraphic) 渲染引擎架构--整体认识 [转]
原文:http://blog.csdn.net/zangle260/article/details/41123067?utm_source=tuicool 本文参考<<osg最长一帧> ...
- Android跨进程訪问（AIDL服务）
我将AndroidAIDL的学习知识总结一下和大家共享 在Android开发中,AIDL主要是用来跨进程訪问. Android系统中的进程之间不能共享内存,因此,须要提供一些机制在不同进程之间进行数据 ...
- 2015年度新增开源软件排名TOP100
2015年度新增开源软件排名TOP100 本榜单包含2015年开源中国新收录的软件中,根据软件本身的关注度.活跃程度进行排名前100名的软件.从这份榜单中或许可以了解到最新业界的趋势. 1.Switc ...
- mongodb管理副本集(持续更新中)
许多维护工作不能在备份节点上完成 因为要写操作,也不能在主节点上进行,这就需要单机模式启动服务器, 是指重启成员服务器,让他成为一个单机运行的服务器,而不再是副本集中的一员(临时的) 在单机 ...
- distinct 与order by 一起用
distinct 后面不要直接跟Order by , 如果要用在子查询用用order by .