欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue实现简单分页器

程序员文章站 2022-06-02 22:46:11
提前说明:这原本是一个jquery分页器,因为公司项目前后端不分离,以前的分页用的是基于.net的分页器。后来我引入了jquery分页器,在我掌握vue之后,又自己写了一些...

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

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