提前说明：这原本是一个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 href="" > <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> <!--页面该显示的内容--> <div>{{nova.text}}</div> <!--分页--> <div v-bind:class="{hiddenPager:hiddenPager}"> <ul></ul> <!--没有跳页功能可以不要下面的jumpBox--> <div> <input type="number" /> <a href="javascript:;" v-on:click="pageSkip()">跳转</a> </div> </div> </div> </body> <script src="https://www.jb51.net/jquery-2.1.4.min.js"></script> <script src="https://www.jb51.net/article/vue.js"></script> <script src="https://www.jb51.net/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><a href="javascript:void(0);" >首页</a></li>', prev: '<li><a href="javascript:void(0);" >上一页 </a></li>', next: '<li><a href="javascript:void(0);" >下一页</a></li>', last: '<li><a href="javascript:void(0);" >尾页</a></li>', page: '<li><a href="javascript:void(0);" >{{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>