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++;
		}
	},