经常在写前端代码的时候都会涉及到分页,这部分代码基本没有太大改变,但是写起来又挺麻烦,所以决定写在博客里,以后自己用到的时候可以直接抄进去,也方便大家
依赖
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jqpaginator.min.js"></script>
<script src="vue.min.js"></script>
结构
代码主要分为4个部分:
- dom节点;
- 数据监听;
- 组件初始化;
- 组件重载(依赖于3)。
代码
dom节点
<div>
<ul class="pagination" id="pages"></ul>
</div>
以上代码请自行复制到需要的节点位置
监听器
这里我们需要依赖VUE提供的监听器
data: {
page: {
//总页数
totalPages: 0,
//页内条目数
pageSize: 0,
//当前页
pageNum: 0,
}
},
watch: {
//监听数据,注意修改为正确的变量名
page: function() {
//这里的第二个参数其实可以随便填,我完全是为了占位,而且我下面写死了
vm.init_page(vm.page.totalPages,vm.page.pageSize,vm.page.pageNum);
}
}
初始化方法
methods: {
/**
* 分页
* totalPages: 总页数
* visiblePages: 展示的页数,我一般都是用10,所以写死了
* currentPage: 当前页
*/
init_page: function (totalPages, visiblePages, currentPage) {
if(totalPages == 0){
return;
}
$.jqPaginator('#pages', {
totalPages: totalPages,
visiblePages: 10,
currentPage: currentPage,
disableClass: 'disabled',
activeClass: "num-cur active",
first: '<li ><a href="javascript:void(0);">首页</a></li>',
prev: '<li ><a href="javascript:void(0);">上一页</a></li>',
next: '<li ><a href="javascript:void(0);">下一页</a></li>',
last: '<li ><a href="javascript:void(0);">末页</a></li>',
page: '<li ><a href="javascript:void(0);">{{page}}</a></li>',
onPageChange: function (pageNum, type) {
if (type == 'change') {
//注意修改为正确的参数名
vm.page.pageNum= pageNum;
vm.change_page(pageNum);
}
}
});
}
}
翻页方法
methods: {
/**
* 翻页
*/
change_page: function (pageNum) {
//注意修改为正确的方法名
this.search(pageNum,10);
}
}
其他
methods: {
/**
* 发送请求
*/
search: function (pageNum,pageSize) {
send_get('url', 'pageNum=' + pageNum + '&pageSize=' + pageSize, function (ret) {
if (ret.code == 0) {
vm.page = ret.page;
} else {
layer.msg(ret.msg);
}
})
}
}
/**
* 对jq的ajax的封装
*/
function send_get(url,data,callback) {
$.ajax({
type: 'GET',
url: url,
data: data,
success: function (ret) {
callback(ret);
}
})
}
完成!把主要的这4段代码复制进自己的页面里,基本上就能用了。因为从项目里复制出来时对敏感信息做了处理,也许会有方法名或其他不对的情况,如果发现了可以提醒我修改
下面附上jqpaginator的地址:jqpaginator