vuejs 分页组件
程序员文章站
2022-03-01 15:00:44
...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="/Scripts/jquery-1.8.0.js"></script>
<style type="text/css">
ul.page > li {
list-style: none;
display: inline;
}
ul.page > li > a, ul.page > li > span {
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
ul.page > li > a {
cursor: pointer;
}
ul.page > li > a.active {
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
ul.page > li > a[disabled] {
color: #777;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}
ul.page > li > span.CustomInfo {
color: black;
}
</style>
</head>
<body>
<div id="app">
<!--<ul class="page">
</ul>-->
<vue-pagination :page-Count="pageCount" :list-Count="entityCount" v-on:page-click="pageClick"></vue-pagination>
</div>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">
//翻页组件
Vue.component('vue-pagination', {
data: function () {
return {
currentPage: 1,
indexs: new Array()
}
},
props: ['pageCount', 'listCount'],
template: '<ul class="page">'
+ '<li><a v-on:click="firstPage" :disabled="currentPage>1?null:\'disabled\'">首页</a></li>'
+ '<li><a v-on:click="previousPage" :disabled="currentPage>1?null:\'disabled\'">上一页</a></li >'
+ '<li v-for="item in indexs"><a v-on:click="pageChang(item.pageIndex)" :class="{active:item.active}">{{ item.showText }}</a></li >'
+ '<li><a v-on:click="nextPage" :disabled="currentPage<pageCount?null:\'disabled\'">下一页</a></li >'
+ '<li><a v-on:click="lastPage" :disabled="currentPage<pageCount?null:\'disabled\'">尾页</a></li>'
+ '<li><span class="CustomInfo">第 {{ currentPage }} 页 共 {{ pageCount }} 页 共 {{ listCount }} 条记录</span></li>'
+ '</ul>',
mounted() {
this.numericButtonBind();
},
methods: {
//首页
firstPage: function () {
if (this.currentPage > 1) {
this.pageChang(1);
}
},
//尾页
lastPage: function () {
if (this.currentPage < this.pageCount) {
this.pageChang(this.pageCount);
}
},
// 下一页
nextPage: function () {
if (this.currentPage < this.pageCount) {
this.pageChang(this.currentPage+1);
}
},
// 上一页
previousPage: function () {
if (this.currentPage >1) {
this.pageChang(this.currentPage-1);
}
},
// 页码点击事件
pageChang: function (pageNo) {
if (pageNo != this.currentPage) {
this.currentPage = pageNo;
this.numericButtonBind();
this.$emit('page-click', this.currentPage)
}
},
numericButtonBind: function () {
var NumericButtonCount = 5, sIndex = 1, eIndex = NumericButtonCount;
for (var i = 0; i < NumericButtonCount; i++) {
if ((this.currentPage + i) % NumericButtonCount == 0) {
eIndex = this.currentPage + i;
break;
}
}
sIndex = eIndex - (NumericButtonCount - 1);
eIndex = eIndex > this.pageCount ? this.pageCount : eIndex;
this.indexs = new Array();
if (eIndex > NumericButtonCount) {
this.indexs.push({ pageIndex: eIndex - 1, active: false, showText: '...' });
}
for (var i = sIndex; i <= eIndex; i++) {
this.indexs.push({ pageIndex: i, active: i == this.currentPage, showText: i });
}
if (eIndex < this.pageCount) {
this.indexs.push({ pageIndex: eIndex + 1, active: false, showText: '...' });
}
}
}
})
var app = new Vue({
el: '#app',
data: {
pageCount: 31,
entityCount: 456
}, mounted() {
},
methods: {
pageClick: function (pageNo) {
// 翻页会触发此事件
},
//获取翻页数据
pageList: function () {
}
}
})
$(function () {
//PageChang(1);
});
function PageChang(PageIndex) {
goPage(PageIndex, function (response) {
console.log(response.d);
});
}
function goPage(pageNo, Callback) {
var settings = {
url: "TabPannel.aspx/GetPageList",
type: "POST",
timeout: 0,
headers: {
"Content-Type": "application/json"
},
data: JSON.stringify({ pageNo: pageNo, pageSize: 15 }),
dataType: "json"
}
$.ajax(settings).done(function (response) {
response = response.d;
var PageHtml = '<li><a href="javascript:void(0)" onclick="PageChang(1)">首页</a></li>';
PageHtml += '<li><a href="javascript:void(0)" onclick="PageChang(' + (pageNo > 1 ? pageNo - 1 : 1) + ')">上一页</a></li >';
if (pageNo == 1) {
PageHtml = '<li><a href="javascript:void(0)" disabled="disabled">首页</a></li>';
PageHtml += '<li><a href="javascript:void(0)" disabled="disabled">上一页</a></li >';
}
var NumericButtonCount = 5, sIndex = 1, eIndex = NumericButtonCount;
for (var i = 0; i < NumericButtonCount; i++) {
if ((pageNo + i) % NumericButtonCount == 0) {
eIndex = pageNo + i;
break;
}
}
sIndex = eIndex - (NumericButtonCount - 1);
eIndex = eIndex > response.pageCount ? response.pageCount : eIndex;
if (eIndex > NumericButtonCount) {
PageHtml += '<li><a href="javascript:void(0)" onclick="PageChang(' + (sIndex - 1) + ')">...</a></li >';
}
for (var i = sIndex; i <= eIndex; i++) {
if (pageNo == i) {
PageHtml += '<li><span class="active">' + i + '</span ></li >';
} else {
PageHtml += '<li><a href="javascript:void(0)" onclick="PageChang(' + i + ')">' + i + '</a></li >';
}
}
if (eIndex < response.pageCount) {
PageHtml += '<li><a href="javascript:void(0)" onclick="PageChang(' + (eIndex + 1) + ')">...</a></li >';
}
if (pageNo == response.pageCount) {
PageHtml += '<li><a href="javascript:void(0)" disabled="disabled">下一页</a></li >';
PageHtml += '<li><a href="javascript:void(0)" disabled="disabled">尾页</a></li>';
} else {
PageHtml += '<li><a href="javascript:void(0)" onclick="PageChang(' + (pageNo == response.pageCount ? pageNo : pageNo + 1) + ')">下一页</a></li >';
PageHtml += '<li><a href="javascript:void(0)" onclick="PageChang(' + response.pageCount + ')">尾页</a></li>';
}
PageHtml += '<li><span class="CustomInfo">第 ' + pageNo + ' 页 共 ' + response.pageCount + ' 页 共 ' + response.entityCount + ' 条记录</span></li>';
$('ul.page').html(PageHtml);
//console.log(response);
}).done(Callback);
}
</script>
</body>
</html>
下一篇： Collections工具类