VUE+BOOTSTRAP+jqpaginator快速实现前端页面分页效果

经常在写前端代码的时候都会涉及到分页，这部分代码基本没有太大改变，但是写起来又挺麻烦，所以决定写在博客里，以后自己用到的时候可以直接抄进去，也方便大家

依赖

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jqpaginator.min.js"></script>
<script src="vue.min.js"></script>

结构

代码主要分为4个部分：

1. dom节点；
2. 数据监听；
3. 组件初始化；
4. 组件重载（依赖于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