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)"> &lt;&lt; </a></li>

     <li v-if="showPre" class="crt"><a v-on:click="minus(cur)"> &lt; </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)">&gt;</a></li>

     <li v-if="showTail" class="crt"><a v-on:click="jumpTail(cur)">&gt;&gt;</a></li>

 </ul>

</div>

<!-- 分页结束 -->

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 ...

随机推荐

《HelloGitHub》第 38 期
兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣人群的月刊,月刊的内容包括:各种编 ...
mysql-实现远程连接(授权法)
远程连接阿里云主机的mysql,遇到以下问题: 1.连接被拒,无法连接可能原因:1.3306(默认)端口未开放,在控制台设置防火墙规则: 2. host字段的值改为%就表示在任何客户端机器上能以ro ...
sqld360
https://mauro-pagano.com/2017/04/15/sql-monitoring-flamegraph-and-execution-plan-temperature-2-0/ ht ...
java基础篇5之泛型
1 泛型的基本应用 //反射方式指定类型,就不用强转 Construcctor<String> constructor = String.class.getConstructor(Str ...
java wait(),notify(),notifyAll()的理解
这个三个函数来自Object类,众所周知它们是用于多线程同步的.然而,有个问题却一直没搞清楚,即notify()函数到底通知谁?<Thinking in JAVA>中有这么一句话,当not ...
Linux学习之十一-Linux字符集及乱码处理
Linux字符集及乱码处理 1.字符(Character)是各种文字和符号的总称,包括各国家文字.标点符号.图形符号.数字等.字符集(Character set)是多个字符的集合,字符集种类较多,每个 ...
IntelliJ IDEA创建文件时自动填入作者时间定制格式
IntelliJ IDEA创建文件时自动填入作者时间定制格式学习了:https://blog.csdn.net/Hi_Boy_/article/details/78205483 学习了:http: ...
RPi Cam v2 之一：基础及牛刀小试
前言原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 本文使用markdown写成,为获得更好的阅读体验,可以访问我的博客. 1.unboxing & comparison 包 ...
常用快递API及快递在线下单API分享
1.常用快递API 支持顺丰.EMS.申通.圆通.韵达.汇通.中通.天天.德邦.全峰等主流快递公司. 文档地址:https://www.juhe.cn/docs/api/id/43 1.1常用快递查询 ...
微信小程序（应用号）开发新闻客户端的实战课程
摘要: 本实例将演示从零开发一个微信应用号的过程,页面轮播与跳转传值,实现单元格自定义布局,全部源码可通过github下载. 下载最新版的微信小程序开发工具,目前是v0.9.092300 下载地址:h ...

vue如何做分页？

vue如何做分页？的更多相关文章

随机推荐

热门专题