JQuery&vue&Ajax 特效分页,跳转分页

代码效果： 此效果只展示左右5个页面，多余的隐藏，如果往下没有页面了会出现以下效果： 也可以跳转页面

导包很关键，不然报错

import org.springframework.data.domain.Page; import org.springframework.data.domain.Pageable;

html：

<table> <tr> <td colspan="8"> <div class="page-bar"> <ul> <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li> <li v-if="cur==1"><a class="banclick">上一页</a></li> <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"> <a v-on:click="btnClick(index)">{{index}}</a> </li> <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li> <li v-if="cur == all"><a class="banclick">下一页</a></li> <li><a>共<i>{{all}}</i>页</a></li> </ul> <input type="text" id="tid"><button v-on:click="tiaozhuan()">跳转</button> </div> </td> </tr> </table>

css：

<style type="text/css"> .page-bar{ margin:10px auto; } li{ float:left;/*浮动*/ } ul,li{ margin: 0px; padding: 0px; } li{ list-style: none } .page-bar li:first-child>a { margin-left: 0px } .page-bar a{ border: 1px solid #ddd; text-decoration: none; position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #5D6062; cursor: pointer; margin-right: 20px; } .page-bar a:hover{ background-color: #eee; } .page-bar a.banclick{ cursor:not-allowed; } .page-bar .active a{ color: #fff; cursor: default; background-color: #E96463; border-color: #E96463; } .page-bar i{ font-style:normal; color: #d44950; margin: 0px 4px; font-size: 12px; } td{ text-align: center; } </style>

vue：

<script> var vm=new Vue({ el:"#app", data:{ cates:[],//显示分页的内容，存值 遍历数据 tid:[],//测试分页返回接受值 all:0, //总页数 cur:0,//当前页码 totalPage: 0,//当前条数 }, mounted(){ this.dataListFn(1); }, methods:{ dataListFn: function(index){ var page=index; $.post("/typel/pagelists",{nowpage:page},function(data){ //alert(JSON.stringify(data)); vm.cates=[]; var len=data.content.length; var dataList=data.content; for (var i = 0; i < len; i++) { vm.cates.push(dataList[i]); } vm.all =data.totalPages;//总页数 vm.cur =data.number+1; vm.totalPage =data.numberOfElements; }); }, //分页 btnClick: function(data){//页码点击事件 if(data != this.cur){ this.cur = data } //根据点击页数请求数据 this.dataListFn(this.cur.toString()); }, //跳转分页 tiaozhuan: function(){//页码点击事件 var data=$("#tid").val(); if(data != this.cur){ this.cur = data } //根据点击页数请求数据 this.dataListFn(this.cur.toString()); }, pageClick: function(){ //根据点击页数请求数据 this.dataListFn(this.cur.toString()); }, }, computed: { //分页 indexs: function(){ var left = 1; var right = this.all; var ar = []; if(this.all>= 5){ if(this.cur > 3 && this.cur < this.all-2){ left = this.cur - 2; right = this.cur + 2; }else{ if(this.cur<=3){ left = 1; right = 5; }else{ right = this.all; left = this.all -4; } } } while (left <= right){ ar.push(left); left ++; } return ar; } } }); </script>

控制器：

//分页 注意把Tylel换成自己的实体类 @RequestMapping("pagelists") @ResponseBody public Page<Typel> pagelist(HttpServletRequest request){ //根据表的主键排序 Sort sort=new Sort(Sort.Direction.DESC,"ttid"); int nowpage=Integer.parseInt(request.getParameter("nowpage")); Pageable page=PageRequest.of(nowpage-1,1); Page<Typel> data=typelService.findAllPage(page); return data; }

补充以下分页的dao要： 是page类型

@Query(value="select * from typel",nativeQuery=true) Page<Typel> findAllPage(Pageable page);

---

简单的页面跳转效果

//定义多个方法 实现跳转 <a v-on:click="shouye()">首页</a> <a v-on:click="shangye(page--)">上页</a> <a v-on:click="xiaye(page++)">下页</a> <a v-on:click="moye()">尾页</a> //首页末页 shouye:function(){ this.fenye(1); }, moye:function(){ this.fenye(vm.totalPages); }, //下一页 上一页 xiaye:function(){ if(this.page<=vm.totalPages){ this.fenye(this.page); }else{ this.page--; } }, shangye:function(){ if(this.page>0){ this.fenye(this.page); }else{ this.page++; } },