Vue实现简单分页器

发布时间：2020-09-28 15:21:30 作者：_夏尔
来源：脚本之家阅读：205

提前说明：这原本是一个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。你需要好好看看它的源码！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。

Vue实现简单分页器

相关阅读