基于bootstrap的paginator和springboot mybatis的pagehelper分页（带搜索功能）

一、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页面

	<!-- 查询 -->
	<input type="text" class="search-text" name="querys" id="querys" value="" autofocus placeholder="请输入姓名" maxlength="25"/>
	<button id="submitBut">查 询</button>
	<!-- 分页 -->
	<div id="Paginator" style="text-align: right;"> 
		<ul id="pageLimit">
		</ul> 
	</div>

3、javascript

<script>
	//初始化页面
	getPageOfMemo(1);
	 
	// 分页函数
	function getPageOfMemo(page) {
		var element = $('#pageLimit');
		element.html("");		//清空分页
		var typeName = $("#querys").val();		//搜索值
		var pageSize = 15;
		var aQuery = {'typeName': typeName, 'pageNum':page,'pageSize':pageSize};
    	var url = "********************************"; 
	 
	    $.ajax({
	    	url: url, 
			type:'post', 
			data: aQuery,
			success: function(data){
				var totalPages;
				if (data.list != null) {
					totalPages = data.pages;
					//writeBody(data.list);		//写入页面数据
					
	                var options = {		//分页
	                    bootstrapMajorVersion : 3,		//版本
	                    currentPage : page, // 当前页数
	                    numberOfPages : 10, // 显示按钮的数量
	                    totalPages : totalPages, // 总页数
	                    itemTexts : function(type, page, current) {
	                    	switch (type) {            
	    			        case "first": return "<<";            
	    			        case "prev": return "<";            
	    			        case "next": return ">";            
	    			        case "last": return ">>";            
	    			        case "page": return page;
	    		        }
	                    },
	                    // 点击事件，用于通过Ajax来刷新整个list列表
	                    onPageClicked : function(event, originalEvent, type, page) {
	                        getPageOfMemo(page);
	                    }
	                };
			    	element.bootstrapPaginator(options);
				}
			},
			error: function(){
			 	alert("请求出错！");
			}
	    });
	};
 
	$("#submitBut").click(function(e) {		//点击查询
		getPageOfMemo(1);
	});
</script>

4、效果—END

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