基于bootstrap的paginator和springboot mybatis的pagehelper分页

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zk_1325572803/article/details/87967808

一、pagehelper的配置

1、pom.xml 中引入pagehelper依赖

<dependency>
	<groupId>com.github.pagehelper</groupId>
	<artifactId>pagehelper-spring-boot-starter</artifactId>
	<version>1.2.5</version>
</dependency>

2、application.yml 中加入pagehelper的配置（）

pagehelper:
    helperDialect: postgresql
    reasonable: true
    supportMethodsArguments: true
    params: count=countSql

3、service层直接调用即可

	PageHelper.startPage(pageNum, pageSize);	//	页码和每页显示条数
	List<AASearch> appsList = aaSearchMapper.selectPageAll();		//	紧跟查询语句，否则没用
	PageInfo<AASearch> appsPageInfo = new PageInfo<>(appsList);	//	包装page对象

来看一下page对象中的数据。总条数用来前端判断页数---到此pagehelper就配置完了

4、controller

二、开始bootstrap的paginator的分页
1、js和css的引入，注意顺序

<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

paginator的js下载地址 https://github.com/lyonlai/bootstrap-paginator

2、html页面

	<!-- 分页 -->
	<div id="Paginator" style="text-align: right;"> 
		<ul id="pageLimit">
		</ul> 
	</div>

3、javascript

<script>
	// 分页 start
	function loadPageLimit(totalPage){
		$('#pageLimit').bootstrapPaginator({    
		    currentPage: 1,    	//默认第一页
		    totalPages: totalPage,    	//总页数（下边有计算总页数）
		    size:"normal",    
		    bootstrapMajorVersion: 3,    	//版本
		    alignment:"right",    
		    numberOfPages:10,    		//每页显示条数
		    itemTexts: function (type, page, current) {        
		        switch (type) {            
			        case "first": return "<<";            
			        case "prev": return "<";            
			        case "next": return ">";            
			        case "last": return ">>";            
			        case "page": return page;
		        }
		    },
		    onPageClicked: function (event, originalEvent, type, page){//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
		    	if (page != pageNum){		//防止重复点击当前页码
			    	loadPageAjax(page);
		    	} else {
		    		return false;
		    	}
		    	pageNum = page;		//防止重复点击
		    }
		});
	}
	
	var pageNum = 1;
	function loadPageAjax(page){
		$.ajax({ 
			url:"http://192.168.15.127:8080/user/indexPage", 
			type:'post', 
			data:{'pageNum':page,'pageSize':10},
			success: function(data){
				if (!choosePage && data.list.length >=10){			//此判断是防止循环调用且如果第一页条数小于10不显示分页
					choosePage = true;
					loadPageLimit(data.pages);
				}
				writeBody(data);		//	自己的数据写入页面
			},
			error: function(){
			 	alert("请求出错！");
			}
      	});
	}
	loadPageAjax(pageNum);
	var choosePage = false;
	// 分页 end
	
	//  页面写入内容
	function writeBody(data){
		
	}
</script>

4、效果—END

不足之处：不像百度式的当前页面显示在中间，自动显示上下几页。（比如：我点击第10页，自动显示为6，7，8，9，10，11，12，13，14，15）