jqpaginator分页

引入<script src="web-static/page/jqpaginator.js"></script>

前端向后端传参：页面的下标(用以确定查询数据的起始处)，每页的数据条数，查询条件参数

后端接收：

根据查询条件查出所有数据的条数（count(1)）

计算出需要的总页面数pageCount

                var pNum=1;
		var pSize=5;
		var vue = new Vue({
			el : "#app",
			data : {
				list : []
			},
			methods : {
				showData : function() {
					$.post("pp/Student/selectAllMap", {
						dept : $("#dept").val(),
						sex : $("#sex").val(),
						pageNum:pNum,
						pageSize:pSize
					}, function(data) {
						var res = $.parseJSON(data);
						vue.list = res.list;
						$("#pager").jqPaginator("option",{
							totalPages:res.pageCount
						});
					});
				},
                                    mounted : function() {
				        this.showData();
				        $("#pager").jqPaginator({
					        totalPages:10,
					        currentPage:1,
					        onPageChange:function(n){
						        pNum=n;
						        vue.$options.methods.showData();
					        }
				        });
			            }
                        });

 

后端sevcie层

public Map<String,Object> selectAllMap(String dept,String sex,int pageNum,int pageSize){
		//获取数据的条数
		int dataCount = studentMapper.selectCountByDeptAndSex(dept, sex);
		//计算出需要的页面数
		int pageCount = dataCount%pageSize==0?dataCount/pageSize:dataCount/pageSize+1;
		//设置分页数据
		//在使用PageHelper分页时，一定要把PageHelper.startPage(pageNum, pageSize)放在最前面，否则会造成总条数显示为：0
		PageHelper.startPage(pageNum, pageSize);
		List<Student> list = studentMapper.selectByDeptAndSex(dept, sex);
		Map<String,Object> map = new HashMap<String,Object>();
		map.put("pageCount", pageCount);
		map.put("list", list);
		
		return map;
	}