Vue实现简单分页器

 更新时间:2018年12月29日 10:23:35   作者:_夏尔  
这篇文章主要为大家详细介绍了Vue实现简单分页器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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


所有的分页器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路由切换时的左滑和右滑效果示例

    Vue路由切换时的左滑和右滑效果示例

    这篇文章主要介绍了Vue路由切换时的左滑和右滑效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue.js每天必学之Class与样式绑定

    Vue.js每天必学之Class与样式绑定

    这篇文章主要为大家详细介绍了Vue.js的Class与样式绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 使用Plotly.js在Vue中创建交互式散点图的示例代码

    使用Plotly.js在Vue中创建交互式散点图的示例代码

    Plotly.js是一个功能强大的JavaScript库,用于创建交互式数据可视化,它支持各种图表类型,包括散点图、折线图和直方图,在Vue.js应用程序中,Plotly.js可用于创建动态且引人入胜的数据可视化,本文介绍了使用Plotly.js在Vue中创建交互式散点图,需要的朋友可以参考下
    2024-07-07
  • 使用vue-aplayer插件时出现的问题的解决

    使用vue-aplayer插件时出现的问题的解决

    这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 学习vue.js计算属性

    学习vue.js计算属性

    这篇文章主要和大家一起学习vue.js的计算属性,分享一些计算属性练习代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 前端架构vue架构插槽slot使用教程

    前端架构vue架构插槽slot使用教程

    这篇文章主要为大家介绍了前端vue架构插槽slot使用教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-02-02
  • 在Vue3.x中实现类似React.lazy效果的方法详解

    在Vue3.x中实现类似React.lazy效果的方法详解

    React 的 React.lazy 功能为组件懒加载提供了原生支持,允许开发者将组件渲染推迟到实际需要时再进行,虽然 Vue3.x 没有一个直接对应的 lazy 函数,但我们可以通过动态导入和 defineAsyncComponent 方法来实现类似的效果,需要的朋友可以参考下
    2024-03-03
  • 基于Vue实现本地消息队列MQ的示例详解

    基于Vue实现本地消息队列MQ的示例详解

    这篇文章为大家详细主要介绍了如何基于Vue实现本地消息队列MQ, 让消息延迟消费或者做缓存,文中的示例代码讲解详细,需要的可以参考一下
    2024-02-02
  • vite2打包的时候vendor-xxx.js文件过大的解决方法

    vite2打包的时候vendor-xxx.js文件过大的解决方法

    vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,本文主要介绍了vite2打包的时候vendor-xxx.js文件过大的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue实现路由切换改变title功能

    vue实现路由切换改变title功能

    这篇文章主要介绍了vue实现路由切换改变title功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05

最新评论