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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
浅谈javascript的分号的使用
May 12 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
iconfont的三种使用方式详解
Aug 05 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 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中的cookie
2006/11/26 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
windows下python连接oracle数据库
2017/06/07 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
最经典的商业地产项目广告词
2014/03/13 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
群教个人对照检查材料
2014/08/20 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
政风行风评议工作总结
2014/10/21 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
vue实现拖拽交换位置
2022/04/07 Vue.js