基于Vuejs框架实现翻页组件
程序员文章站
2023-11-06 15:39:04
翻页功能对前端后端都是个难题啊！今天终于给踩了！哈哈！整理下方法，我是基于vuejs写的，同样适用于angular哈！
封装下载地址：
效果截图：
整体实现逻...
翻页功能对前端后端都是个难题啊！今天终于给踩了！哈哈！整理下方法，我是基于vuejs写的，同样适用于angular哈！
封装下载地址：
效果截图：
整体实现逻辑，当用户点击页码时，ajax从后端获取数据，包括：records（当前页查询到的记录），totalrecords: 121（所有记录），currentpage（当前页码），totalpage（总页码），size（当前页显示数量），之后用我封装的算法assemblepageturnerparams，算出页面展示哪些页码。
不得不说，我考虑的很全面的哈！！页码多的时候显示省略号，页码少的时候，则显示的少！
源码如下：
html
<!doctype html>
<html>
<head>
<title>vue翻页</title>
<link rel="stylesheet" type="text/css" href="css/pageturner.css">
</head>
<body class="myapp">
<div class="wrapper">
<p class="records">当前展示 {{ pageturner.records }} 条记录，共{{ pageturner.totalrecords }} 条记录</p>
<ul class="page-turner-container clearfix">
<li v-on:click="querydata(pageturner.currentpage-1)">«</li>
<!-- 首页 -->
<li v-on:click="querydata(1)" :class="pageturner.currentpage == 1 ? 'current-page' : '' ">1</li>
<li v-if="pageturner.currentpage>4 && pageturner.totalpage>7" class="omit">...</li>
<!-- 展示页 -->
<li v-for="page in pageturner.displaypagelist" :class="page == pageturner.currentpage ? 'current-page' : '' " v-on:click="querydata(page)">{{ page }}</li>
<!-- 尾页 -->
<li v-if="pageturner.currentpage<pageturner.totalpage-3 && pageturner.totalpage>7 " class="omit" >...</li>
<li v-on:click="querydata(pageturner.totalpage)" :class="pageturner.currentpage == pageturner.totalpage ? 'current-page' : '' " v-if="pageturner.totalpage != 1 && pageturner.totalpage>6">{{ pageturner.totalpage }}</li>
<li v-on:click="querydata(pageturner.currentpage+1)">»</li>
</ul>
</div>
<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript" src="pageturner.js"></script>
</body>
</html>
vue
//ajax返回json
//{"status":true,"msg":"ok","data":{"accidentlist":[{"token":"mw==","accidentstatus":"triggered","endtime":"------------","continuetime":"------------","accidentstatusfriend":"\u5f85\u63a5\u624b","id":"3","enid":"11","currentlevelnum":"0","curduty":[{"id":"4420","name":"zhaopeng1","type":"member"}],"curpolicyid":"2","createtime":"2016-08-24 15:43:10","description":"{\"level\":1,\"genre\":2,\"from\":\"10.103.11.21\",\"info\":\"xx\u786c\u4ef6fail\",\"detail\":\"xx\u786c\u4ef6fail\u53ef\u80fd\u7684\u539f\u56e0\u662fxxx\uff0c\u5efa\u8baexxx\"}","level":1,"genre":2,"from":"10.103.11.21","info":"xx\u786c\u4ef6fail","servicename":"ceshi"},{"token":"mg==","accidentstatus":"triggered","endtime":"------------","continuetime":"------------","accidentstatusfriend":"\u5f85\u63a5\u624b","id":"2","enid":"10","currentlevelnum":"0","curduty":[{"id":"4420","name":"zhaopeng1","type":"member"}],"curpolicyid":"2","createtime":"2016-08-24 15:43:07","description":"{\"level\":1,\"genre\":2,\"from\":\"10.103.11.21\",\"info\":\"xx\u786c\u4ef6fail\",\"detail\":\"xx\u786c\u4ef6fail\u53ef\u80fd\u7684\u539f\u56e0\u662fxxx\uff0c\u5efa\u8baexxx\"}","level":1,"genre":2,"from":"10.103.11.21","info":"xx\u786c\u4ef6fail","servicename":"ceshi"},{"token":"mq==","accidentstatus":"triggered","endtime":"------------","continuetime":"------------","accidentstatusfriend":"\u5f85\u63a5\u624b","id":"1","enid":"9","currentlevelnum":"0","curduty":[{"id":"4420","name":"zhaopeng1","type":"member"}],"curpolicyid":"1","createtime":"2016-08-24 15:31:59","description":"{\"level\":1,\"genre\":2,\"from\":\"10.103.11.21\",\"info\":\"xx\u786c\u4ef6fail\",\"detail\":\"xx\u786c\u4ef6fail\u53ef\u80fd\u7684\u539f\u56e0\u662fxxx\uff0c\u5efa\u8baexxx\"}","level":1,"genre":2,"from":"10.103.11.21","info":"xx\u786c\u4ef6fail","servicename":"nimi"}],"pageparams":{"records":"12","totalrecords":"121","currentpage":"2","totalpage":"18","size":12}}}
//前4个属性是后台返回的，前端计算displaypagelist展示列表
var pageturnerdefaultparams = {
records: 9,
totalrecords: 121,
currentpage: 1,
totalpage: 1,
size: 12,
displaypagelist: [3,4,5,6,7]
};
var assemblepageturnerparams = function(records,totalrecords,currentpage,totalpage,size){
var records = records;
var totalrecords = totalrecords;
var currentpage = currentpage;
var totalpage = totalpage;
var size = size;
var displaypagelist = [];
var firstpage = ''
//第一页时 翻上页
if(currentpage<1){
console.log('已经是第一页了！！')
currentpage = 1
}
//最后一个 翻下页
else if(currentpage>totalpage){
console.log('已经是最后一页了！！')
currentpage = totalpage
}
//总页数小于7页
if (totalpage<7){
console.log('总页数小于7页！')
//console.log('总页数：' + totalpage)
for (var j=2; j<=totalpage; j++){
//console.log(j)
displaypagelist.push(j)
}
}
//总页数大于等于7页
else{
console.log('总页数大于等于7页！')
if (currentpage<5){
console.log('点击的页面小于5')
firstpage = 2
}
// else if (currentpage<6){
// console.log('点击的页面小于6')
// firstpage = 3
// }
else if(currentpage>totalpage-3){
console.log('点击的页码大于总页码-3了')
firstpage = totalpage - 5
}
else{
firstpage = currentpage-2;
}
for (var i=firstpage; i<firstpage+5; i++){
displaypagelist.push(i)
}
}
var params = {
records: records,
totalrecords: totalrecords,
currentpage: currentpage,
totalpage: totalpage,
size: size,
displaypagelist: displaypagelist
}
return params
};
var pageturnercontroller = new vue({
el: '.myapp',
data: {
pageturner: pageturnerdefaultparams
},
ready: function() {
//首次查询时 传递查询第一页和pagesize
this.querydata(1)
},
methods: {
querydata:function(page){
//do ajax here
//从后台获取到records totalrecords totalpage size
//用assemble方法计算出所有翻页相关的参数
//assemblepageturnerparams 的4个参数 records totalrecords page totalpage pagesize
this.pageturner = assemblepageturnerparams(11,121,page,10,12)
console.log(json.stringify(this.pageturner))
console.log('跳转到' + this.pageturner.currentpage)
}
}
});
本文已被整理到了《vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 爱