Vue实现简单分页器
程序员文章站
2022-06-02 22:46:11
提前说明:这原本是一个jquery分页器,因为公司项目前后端不分离,以前的分页用的是基于.net的分页器。后来我引入了jquery分页器,在我掌握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。你需要好好看看它的源码!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 咸菜疙瘩怎么做好吃