SpringBoot 整合 PageHelper 分页查询（加前端代码）

1.今天写项目需要用到PageHelper 分页插件去分页，如果已经SpringBoot搭好Mybatis 的话直接跳过第二步。

2.如果SpringBoot没有整合Mybatis 可以参考 Eclipse + SpringBoot + Mybaits 项目整合

3.在pom.xml 引入pageHelper 依赖。

     <!-- pageHelper -->
     <dependency>
          <groupId>com.github.pagehelper</groupId>
          <artifactId>pagehelper-spring-boot-starter</artifactId>
          <version>1.2.10</version>
      </dependency>

4 . 直接上js 代码。

<script>
		 $(function(){
	        var html = "";
	        html+='<div class="pages"  style="font-size:15px; text-align:center ;">';
	        html+='<div class="col-md-5" style="float:left ;text-align:left">当前第 ${pageInfo.pageNum} 页，共 ${pageInfo.pages}页，共 ${pageInfo.total} 条记录&emsp;&emsp;';
	     	html+='<select id="pageSize"  style="width:45px"  language=javascript οnchange="javascript:window.location.href=this.options[this.selectedIndex].value">';
	     	for(var i=10;i<=30;i+=5){
	     		if(${pageInfo.pageSize}==i){
	     			html+='<option selected="selected"  value="${pageContext.request.contextPath}/sysMenu/listMenu?page=${pageInfo.pageNum}&size='+i+'">'+i+'</option>';
	     		}else{ 
	     			html+='<option value="${pageContext.request.contextPath}/sysMenu/listMenu?page=${pageInfo.pageNum}&size='+i+'">'+i+'</option>';
	     		}
	     	}
	     	html+='</select></div>';
	     	
	    	html+='<div class="pagenation" class="col-md-6" >';
	        var first ='<a href="${pageContext.request.contextPath}/sysMenu/listMenu?page=1&size=${pageInfo.pageSize}" aria-label="Previous">首页</a>&emsp;';
	        var before ='<a href="${pageContext.request.contextPath}/sysMenu/listMenu?page=${pageInfo.pageNum-1}&size=${pageInfo.pageSize}" >上一页</a>&emsp;';
	        html+= first;
	        html += before;
	        var begin;
	        var end;
	        if (${pageInfo.pages < 6}){
	            begin=1;
	            end=${pageInfo.pages};
	        }else{
	            begin = ${pageInfo.pageNum-3};
	            end = ${pageInfo.pageNum+2};
	            if (begin< 1){
	                begin= 1;
	                end = begin + 5;
	            }
	            if (end > ${pageInfo.pages}){
	                end = ${pageInfo.pages};
	                begin = end -5;
	            }
	        }
	        var max = ${pageInfo.pages};
	        var str ='';
	        for (var i = begin ; i <= end ; i++) {
	                str += '<a href="${pageContext.request.contextPath}/sysMenu/listMenu?page='+i+'&size=${pageInfo.pageSize}" >'+i+'</a>&emsp;';
	                
	        }
	        html+=str;
	        
	        if (${pageInfo.pageNum >= pageInfo.pages}){
	            var lastPage ='<a href="${pageContext.request.contextPath}/sysMenu/listMenu?page='+max+'&size=${pageInfo.pageSize}" >下一页</a>&emsp;';
	        }else {
	            var lastPage ='<a href="${pageContext.request.contextPath}/sysMenu/listMenu?page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}" >下一页</a>&emsp;';
	        }
	        var nextPage ='<a href="${pageContext.request.contextPath}/sysMenu/listMenu?page=${pageInfo.pages}&size=${pageInfo.pageSize}" aria-label="Next" >尾页</a>';
	        html+=lastPage;
	        html+=nextPage;
	        html+='</div>';
	         $("#pages").html(html); 
	    })
	</script>

5 .我们通过 "${pageContext.request.contextPath}/sysMenu/listMenu?page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}" 发送请求到服务器。
6. 接着在Controller 层

@Controller
@RequestMapping("/sysMenu")
public class SysMenuController {
	@Autowired
	private SysMenuService sysMenuService;
	
	//查询操作
	@RequestMapping("/listMenu")
	public ModelAndView listMenu(@RequestParam(required = true,name = "page",defaultValue = "1")Integer page,
			@RequestParam(name = "size",defaultValue = "10") Integer size) {
		ModelAndView model = new ModelAndView();
		List<SysMenu> sysMenus = sysMenuService.findSysMenus(page,size);
		
		PageInfo pageInfo = new PageInfo(sysMenus);
		pageInfo.setPageSize(size);
		model.addObject("pageInfo", pageInfo);
		model.setViewName("/sys/menu");
		return model;
	}
}

7 在Service 层

@Service
@Transactional
public class SysMenuService {
	@Autowired
	private SysMenuMapper SysMenuMapper;
	
	public List<SysMenu> findSysMenus(Integer page, Integer size) {
		PageHelper.startPage(page,size);
		return SysMenuMapper.selectAll();
	}
}

8 嗯呢，接着你需要在页面写个div标签 ,id 为pages，

<!-- 开始分页 -->
<div id="pages">
</div>

9 搞定。效果如图