Vue实现简单分页器

更新时间：2020-08-10 12:00:01 作者：startmvc

提前说明：这原本是一个Jquery分页器，因为公司项目前后端不分离，以前的分页用的是基于

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

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