使用Vue自定义分页插件
以下提供一套分页插件教你如何在Vue中不使用Element UI实现分页
- 首先将以下函数添加到js中
/**
* 计算页面总数
* @param {Object} newPage 当前页码
* @param {Object} pageTotal 页码总数
*/
function pageButton(newPage, pageTotal) {
var pageList = [];
var newItem = {}
if(newPage == 1) {
newItem.disabled = true;
newItem.page = newPage;
} else {
newItem.disabled = false;
newItem.page = newPage - 1;
}
newItem.isPrevious = true;
pageList[0] = newItem;
var navigatepageNums = calcNavigatepageTotal(pageTotal, newPage, 10);
for(var i = 0; i < navigatepageNums.length; i++) {
var item = {}
if(newPage == navigatepageNums[i]) {
item.isActive = true;
} else {
item.isActive = false;
}
item.isBody = true;
item.page = navigatepageNums[i];
pageList[pageList.length] = item;
}
var endItem = {};
if(newPage == pageTotal) {
endItem.disabled = true;
endItem.page = newPage;
} else {
endItem.disabled = false;
endItem.page = newPage + 1;
}
endItem.isNext = true;
pageList[pageList.length] = endItem;
return pageList;
}
function calcNavigatepageTotal(pages, pageNum, navigatePages) {
//当总页数小于或等于导航页码数时
var navigatepageNums = [];
if(pages <= navigatePages) {
for(var i = 0; i < pages; i++) {
navigatepageNums[i] = i + 1;
}
} else { //当总页数大于导航页码数时
var startNum = pageNum - navigatePages / 2;
var endNum = pageNum + navigatePages / 2;
if(startNum < 1) {
startNum = 1;
//(最前navigatePages页
for(var i = 0; i < navigatePages; i++) {
navigatepageNums[i] = startNum++;
}
} else if(endNum > pages) {
endNum = pages;
//最后navigatePages页
for(var i = navigatePages - 1; i >= 0; i--) {
navigatepageNums[i] = endNum--;
}
} else {
//所有中间页
for(var i = 0; i < navigatePages; i++) {
navigatepageNums[i] = startNum++;
}
}
}
return navigatepageNums;
}
- 接下来只需要将ajax返回来的数据的当前页和总页数作为参数执行pageButton函数即可，以下是示例代码
function loadData(currentPage,pageSize){
var params = {
currentPage:currentPage,
pageSize:pageSize
}
$.doPostHttp("api/manage/worker/query/list",params,function(data){ // 这个异步ajax方法是经过处理的，本质就是Jquery的ajax方法
if (data.status == 0) {
var result = data.result;
workerVue.$set(workerVue,"workerList",result.dataList);
if (currentPage == 1) {
var nowPage = result.currentPage;
var totalPage = result.totalPage;
var pageList = pageButton(nowPage,totalPage);
workerVue.$set(workerVue,"pageList",pageList);
workerVue.$set(workerVue,"totalPage",totalPage);
}else{
var pageList = pageButton(currentPage,workerVue.totalPage);
workerVue.$set(workerVue,"pageList",pageList);
}
workerVue.$set(workerVue,"currentPage",currentPage);
// 将当前页保存到浏览器内存
sessionStorage.setItem("currentPage-worker",currentPage);//这行代码是为了查看这条数据跳转页面返回的时候能够回到刚才查看的页码数据
}else{
tipMsgError(data.msg);
}
},function(data){
// 请求失败
tipMsgError("Network anomaly");
},false);
}
- 以上需要注意的是，需要在Vue模板里的data属性上加上totalPage默认值，不然可能出错，如下所示：
workerVue = new Vue({
el ：“#worker”，
data :{
currentPage:1,
pageSize:9,
totalPage:1,
workerList:[],
pageList:[]
},
created : function(){
// 加载列表
loadData(this.currentPage,this.pageSize);
// 获取本地变量，也就是当前页码，对应第二步的分页查看回显问题
var value = sessionStorage.getItem("currentPage-worker");
if(value != null){
this.changPage(value);
}
}，
methods : {
changPage : function(page){ // 这个方法非常重要，是切换页码功能实现的必要方法
if (page == this.currentPage) {
return ;
}else{
loadData(page,this.pageSize);
}
}
}
})
- 最后就是页面的分页样式了，可以直接复制以下代码到页面上，不需要做任何更改，如需要，可以自己写css改变分页页码的样式。
<!-- 分页 -->
<div class="pageList">
<ul class="page" style="margin-top: 20px">
<li v-for="(btn,index) in pageList" :class="{disabled:btn.disabled,active:btn.isActive}" @click="changPage(btn.page)">
<a v-if="index == 0" :disabled="btn.disabled" >
<span aria-hidden="true">«</span>
</a>
<a v-if="index != 0 && index != pageList.length-1" :disabled="btn.isActive" v-text="btn.page" ></a>
<a v-if="index == pageList.length-1" :disabled="btn.disabled" >
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
最后，需要大家注意的是分页的div必须在vue的控制范围里，也就是Vue的el 作用范围，Vue大神可忽略，相信大神们也不会犯这种低级错误0_0
