Vue实现简单分页器


Posted in Javascript onDecember 29, 2018

提前说明:这原本是一个Jquery分页器,因为公司项目前后端不分离,以前的分页用的是基于.net的分页器。后来我引入了jquery分页器,在我掌握Vue之后,又自己写了一些基于Vue的插件(为什么不用成熟的Vue插件库,还是因为前后端没分离)但是前后端相对最开始的混杂已经算是分得很开了。

分页器的样式是bootstrap风格的,是一个完全自定义样式的分页器,这意味着你可以很轻松把它改成你想要的样子(例子效果图如下)。

Vue实现简单分页器

所有的分页器DEMO,都不会太简单,所以想要真正的掌握(支配)一款好用的分页插件,请务必耐心看下面的使用示例代码(本demo的下载地址,点击可以作为项目直接打开使用),另外也写了详细的注释并尽可能的保证简单好用。
引用bootstrap(如果你希望是bootstrap风格)
或者你完全可以自己写自己想要的风格!因为分页器的html结构是js生成的。
需要引用的脚本文件有(资源均在文章底部下载包里)。

按如下顺序引入:

1.jQuery
2.Vue
3.jgPaginator.js

贴代码,看注释:

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>分页组件</title>
  <link rel="stylesheet" href="../../css/bootstrap.min.css" >

  <style>
   html,
   body {
    width: 100%;
    height: 100%;
   }

   .page-container {
    width: 1200px;
    border: 1px solid #000;
    margin: 50px auto 0 auto;
    overflow: hidden;
   }

   .page-content{
    margin: 50px 0;
   }

   /*jqPaginator分页控件样式*/ 
   .hiddenPager {
    visibility: hidden;
   }

   .jqPager {
    position: relative;
    width: 100%;
    height: 40px;
    padding: 25px 0;
    background-color: #FFF;
   }

   .jqPager .pagination {
    float: initial;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
   }

   .jqPager .pagination li {
    display: inline-block;
   }

   .jqPager .pagination li a {
    padding: 4px 10px;
   }

   /*跳页--选用功能*/
   .jumpBox {
    position: absolute;
    top: 0;
    right: 105px;
   }

   .jumppage {
    display: block;
    width: 42px;
    padding-left: 8px;
    float: left;
    height: 34px;
    outline: none;
   }

   .jumpbtn {
    float: left;
    display: block;
    height: 34px;
    line-height: 34px;
    margin-left: 5px;
   }
  </style>

 </head>

 <body>

  <div id="app" class="page-container">
   <!--页面该显示的内容-->
   <div class="page-content text-center">{{nova.text}}</div>

   <!--分页-->
   <div class="jqPager" v-bind:class="{hiddenPager:hiddenPager}">
    <ul id="jqPager" class="pagination cf"></ul>
    <!--没有跳页功能可以不要下面的jumpBox-->
    <div class="jumpBox">
     <input type="number" class="jumppage" id="jumpPageIndex" />
     <a href="javascript:;" rel="external nofollow" class="jumpbtn" v-on:click="pageSkip()">跳转</a>
    </div>
   </div>

  </div>

 </body>
 <script src="jquery-2.1.4.min.js"></script>
 <script src="vue.js"></script>
 <script src="jqPaginator.js"></script>
 <script>
  //虚拟的数据来源
  var dataSource = [{
    "text": "第一页数据,应该是一个数组,包含了pageSize条数据"
   }, {
    "text": "第二页数据"
   }, {
    "text": "第三页数据"
   },
   {
    "text": "第四页数据"
   },
   {
    "text": "第五页数据"
   },
   {
    "text": "第六页数据"
   }
  ]

  //模拟后台返回的数据
  var backData = {
   Data: dataSource,//返回的数据
   totlaCount: 6,//搜索结果总数
   Success: true//请求接口是否成功
  };

  /*每一页显示的数据条数,按照约定传给后台,此例为1。
  需要加以说明的是这个实例你是看不出来这个参数的作用的,正如我返回数据中说的那样,后台给你返回的数据条数
  应该是一个有 -pagesize-条数据的数组才对*/
  var jqPageSize = 1; 

  var app = new Vue({
   el: "#app",
   data: {
    //query是查询条件,这里就是当前页码和每一页该显示的数据条数
    query: {
     pageIndex: 1,
     pageSize: jqPageSize
    },
    nova: [],
    hiddenPager: true,//是否显示分页
    totalCount: 0,//数据总条数,后台返回
   },
   methods: {
    //初始化分页,通过更改生成的html结构(给其添加class或者改变返回的DOM)可以手动配置页器的显示效果。
    initPager: function() {
     $('#jqPager').jqPaginator({
      visiblePages: 1,
      currentPage: 1,
      totalPages: 1,
      first: '<li id="first"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>',
      prev: '<li id="prev"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页 </a></li>',
      next: '<li id="next"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a></li>',
      last: '<li id="last"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >尾页</a></li>',
      page: '<li class="page"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{page}}</a></li>',
     });
    },

    //获取数据并根据结果配置分页
    getData: function() {
     this.nova = backData.Data[this.query.pageIndex - 1];     
     this.totalCount = backData.Data.length;
     this.hiddenPager = false;

     //核心配置在此部,根据后台返回数据控制分页器该如何显示
     //想要完全掌握这个分页器,你可以研究下jgPaginator.js源码,很容易修改。
     $('#jqPager').jqPaginator('option', {
      totalCounts: app.totalCount,//后台返回数据总数
      pageSize: jqPageSize, //每一页显示多少条内容
      currentPage: app.query.pageIndex, //现在的页码
      visiblePages: 4, //最多显示几页

      //翻页时触发的事件
      onPageChange: function(num) {
       //app.query.pageIndex = num;
       app.pageChangeEvent(num);//调用翻页事件
      }
     });
    },
    //翻页或者跳页事件
    pageChangeEvent: function(pageIndex) {
     this.query.pageIndex = Number(pageIndex);
     this.getData();
    },

    //跳页-选用功能,可有可无
    pageSkip: function() {  
     var maxPage = 1;//默认可以跳的最大页码     
     var targetPage = document.getElementById("jumpPageIndex").value;//目的页面     
     if(!targetPage) {
      alert("请输入页码");
      return;
     }

     //计算最大可跳页数
     maxPage = Math.floor(this.totalCount / this.query.pageSize);     
     if(maxPage<1){
      maxPage=1;
     }

     if(targetPage > maxPage) {
      alert('超过最大页数了,当前最大页数是' + maxPage);
      return;
     }
     this.pageChangeEvent(targetPage);
    },   
   },
   //这一部分的定时器是为了此例方便加上的,初始化分页方法(initPager)要在获取数据之前执行就可以了
   mounted: function() {
    this.initPager();

    setTimeout(function() {
     app.getData();
    }, 50)
   }

  });
 </script>

</html>

以上就是分页的全部实现代码,想要完全掌握,只看DEMO肯定是不够的,所以这里是DEMO的下载地址,里面包含了所有需要引用的资源文件以及未压缩的分页器核心:jqPaginator.js。你需要好好看看它的源码!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
Javascript中With语句用法实例
May 14 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 #Javascript
基于vue.js实现分页查询功能
Dec 29 #Javascript
小程序日历控件使用方法详解
Dec 29 #Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 #jQuery
小程序自定义日历效果
Dec 29 #Javascript
微信小程序自定义带价格显示日历效果
Dec 29 #Javascript
微信小程序日历效果
Dec 29 #Javascript
You might like
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
详解js异步文件加载器
2016/01/24 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
javascript 模拟点击广告
2010/01/02 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
javascript自执行函数
2017/02/10 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
Python提取网页中超链接的方法
2016/09/18 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python如何生成xml文件
2020/06/04 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
志愿者活动总结报告
2014/06/27 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
怎么用Python识别手势数字
2021/06/07 Python