springboot -- 基于layui+jpa+thymeleaf 模板的分页完整实现

效果图

样式可自己修改

1、application.properties配置

#默认分页条数，
page.pageSize=20

2、后台分页判断工具类 --> PageUtil .java

controller中有一句
//分页初始化默认数据，防止报错（工具类，大家自定义）
Map map = PageUtil.pageNum(pageNum, totalPages, pageSize);
直接用就好了

import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.PropertySource;
import org.springframework.stereotype.Component;
/**
 * 
 * @author wangsong
 * @date 2019年4月10日 下午4:13:25
 */
@Component
@PropertySource({"classpath:application.properties"})
public class PageUtil {

	/**
	 * 读取配置文件的数据，springboot的读取方式，在 application.properties中定义
	 * 
	 *  #默认分页条数，
     *  page.pageSize=20
	 */
	public  static Integer pageSizeVal;
	
	
	
	@Value(value = "${page.pageSize}")
	public void setPageSize(Integer pageSize) {
		PageUtil.pageSizeVal = pageSize;
	}


	/**
	 * 初始化分页数据默认第几页，每页几条，和上一页下一页最大页数最小页数判断
	 * @param pageNum
	 * @param totalPages
	 * @param pageSize
	 * @return
	 */
	public static Map pageNum(Integer pageNum,Integer totalPages,Integer pageSize){
		Map pageMap = new HashMap<>(2);
		if (pageNum == null || pageNum < 1) {
			pageNum = 1;
		}
		if (totalPages != null) {
			if (pageNum > totalPages) {
				pageNum = totalPages;
			}
		}
		if(pageSize == null){
			pageSize = Integer.valueOf(pageSizeVal) ;
		}
		pageMap.put("pageNum", pageNum);
		pageMap.put("pageSize", pageSize);
		return pageMap;
	}
}

3、dao 层

import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;

import com.hy.wargame.domain.User;
@Repository
public interface UserDao  extends JpaRepository,JpaSpecificationExecutor{
	/**
	 * 分页查询用户账号管理
	 * @param spec
	 * @param pageable
	 * @return
	 */
	Page findAll(Specification spec, Pageable pageable);
}

4、service层

import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.Optional;

import javax.annotation.Resource;
import javax.persistence.criteria.CriteriaBuilder;
import javax.persistence.criteria.CriteriaQuery;
import javax.persistence.criteria.Predicate;
import javax.persistence.criteria.Root;

import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Sort;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.stereotype.Service;

import com.hy.wargame.domain.User;
import com.hy.wargame.domain.dao.UserDao;

@Service
public class UserService {

	@Resource
	UserDao userDao;

	/**
	 *  分页查询
	 *  param ： 可传查询条件，无查询所有
	 *  条件判空：if(param.get(key) != null && !"".equals(param.get(key).toString()) && !"-1".equals(param.get(key).toString())) {   }
	 * 
	 *  分页   PageRequest.of(page - 1, size, Sort.Direction.DESC, "id")  
	 *  排序  Sort.Direction.DESC, "id"     
	 * 
	 *   cb.like    模糊查询
	 *   cb.equal   精准查询
	 *   cb.between 时间段查询
	 *   cb.and     满足所有条件
	 *   cb.or      满足其中一个条件
	 * 
	 * @param page
	 * @param size
	 * @param param
	 * @return
	 */
	public Page Page(int page, int size, Map param) {
		return userDao.findAll(new Specification() {
			private static final long serialVersionUID = 1L;

			@Override
			public Predicate toPredicate(Root root, CriteriaQuery query, CriteriaBuilder cb) {
				// TODO Auto-generated method stub
				List list = new ArrayList<>();
				for (String key : param.keySet()) {
					list.add(cb.like(root.get(key).as(String.class), ("%" + param.get(key) + "%").toString()));
				}
				Predicate[] p = list.toArray(new Predicate[0]);
				return cb.and(p);
			}

		}, PageRequest.of(page - 1, size, Sort.Direction.DESC, "id"));
	}


	/**
	 * id查询
	 * 
	 * @param id
	 * @return
	 */
	public User get(int id) {
		Optional optional = userDao.findById(id);
		if (optional.isPresent()) {
			return optional.get();
		}
		return null;
	}

	/**
	 * 查询所有
	 * 
	 * @return
	 */
	public List list() {
		Iterable it = userDao.findAll();
		List list = new ArrayList();
		it.forEach(item -> list.add(item));
		return list;

	}

	/**
	 * 添加或修改信息
	 * 
	 * @param func
	 * @return
	 */
	public boolean addAndUpd(User user) {
		if (userDao.save(user) != null) {
			return true;
		}
		return false;
	}

	/**
	 * 删除
	 * @param id
	 * @return
	 */
	public boolean del(int id) {
		userDao.deleteById(id);
		return true;
	}

}

5、controller层

@Controller
@RequestMapping("/user")
public class UserController extends BaseController {
	
	Logger log = Logger.getLogger(UserController.class);
	
	
	@Resource
	UserService userService;

	/**
	 * 分页查询
	 * @return
	 */
	@RequestMapping("/user")
	String list(Integer pageNum, Integer totalPages,Integer pageSize) {
	    //分页初始化默认数据，防止报错（工具类，下方有）
		Map map = PageUtil.pageNum(pageNum, totalPages, pageSize);
		//添加查询条件
		Map param = new HashMap(8);
		param.put("name", getString("name", ""));
		param.put("account", getString("account", ""));
		//查询
		Page page = userService.Page(map.get("pageNum"),map.get("pageSize"), param);
		param.put("page", page);
		//回写每页记录数，分页需要
		param.put("pageSize", map.get("pageSize"));
	    addRequest("echo", param);
		return "manages/user/user";
	}

		/**
	 	 *      page.getTotalElements(); //总数据数
		 * 		page.getTotalPages(); //总页数
	     * 		page.getNumber();//当前页
		 * 		page.getSize();//每页条数
		 *   	page.getNumberOfElements();//本页条数
		 * 		page.getContent().toString();//数据  
		 */	
		 

	/**
	 * 添加+修改
	 */
	@RequestMapping("/save")
	@ResponseBody
	public String save(User user) {
	   //取id的方法，请使用自己的
		int id = getInt("id", 0);
		if (id > 0) 
		{
			// 修改
			User userUpd = userService.get(id);
			userUpd.setName(user.getName());
			userUpd.setAccount(user.getAccount());
			userUpd.setThe_id(user.getThe_id());
			//user.setPwd(getString("pwd", ""));管理不能修改用户密码
			userUpd.setRole_id(user.getRole_id());
			userUpd.setThe_id(user.getThe_id());
			userService.addAndUpd(userUpd);
		} else 
		{  
			// 添加
			user.setPwd(MD5Util.md5(user.getPwd()));
			userService.addAndUpd(user);
		}
		return "seccess";
	}


	/**
	 * 删除
	 */
	@RequestMapping("/deleteId")
	public String deleteId(Integer id,String name) {
		if (id > 0) {
			userService.del(id);
		}
		return "redirect:/user/user";
	}
}

7、前台取值

	
				1
				
				
    省略........

分页查询条件回显 echo.
controller 把所有查询条件在写回来就好了，需要其他的直接添加在 param中
th:value="${echo?.account}"

8、js 分页通用代码定义 --> utlisPage.js

/**
 * 页面没有layui.use 无法使用layer.msg 提示框，所以我们在这里定义,拷贝到你的每一个需要分页的主页面中即可
 */
layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
});
     

//首页
function pagemain(pageSize,pageNum){
	if(parseInt(pageNum) != 0){
		pageNum = parseInt(0);
		window.location.href= path+'?pageSize='+pageSize+'&&pageNum='+pageNum+'&&'+search;
	}else{
		layer.msg('亲... 当前已经是第一页了!');
	}
}
//上一页
function pagesye(pageSize,pageNum){
	pageNum = parseInt(pageNum);
	if(pageNum > 0){
		window.location.href= path+'?pageSize='+pageSize+'&&pageNum='+pageNum+'&&'+search;
	}else{
		layer.msg('亲... 当前已经是第一页了!');
	}
}
//下一页
function pagexye(pageSize,pageNum,totalPages){
	pageNum = parseInt(pageNum) + 2;
	if(pageNum <= totalPages){
		window.location.href= path+'?pageSize='+pageSize+'&&pageNum='+pageNum+'&&totalPages='+totalPages+'&&'+search;
	}else{
		layer.msg('亲... 当前已经是最后一页了!');
	}
}
//末页
function pageweiye(pageSize,pageNum,totalPages){
	if((parseInt(pageNum)+1) != parseInt(totalPages)){
		pageNum = parseInt(totalPages);
		window.location.href= path+'?pageSize='+pageSize+'&&pageNum='+pageNum+'&&'+search;
	}else{
		layer.msg('亲... 当前已经是最后一页了!');
	}
}
//每页数量改变监听
function sizepage(){
	var size = $("#size").val();
	if(parseInt(size) > 0 && parseInt(size) <= 50){
		window.location.href= path+'?pageSize='+size+'&&'+search;
	}else{
		layer.msg('亲... 每页记录数不能小于0或大于50哦!');
	}
}
//跳到第几页数量监听
function t_num_page(pageSize,totalPages){
	var pageNum = $("#numberPage").val();
	if(parseInt(pageNum) > 0 && parseInt(pageNum) <= totalPages){
		window.location.href= path+'?pageSize='+pageSize+'&&pageNum='+pageNum+'&&'+search;
	}else{
		layer.msg('亲... 页数不能小于零或大于总页数哦!');
	}
}

9、html 通用分页页面定义 --> page.html

                        共    记录 
        -- 到--页   
       
         -- 
         /   
         
        
          
        
        首页
        上一页
        下一页
        末页
 



 	

				

10、需要分页的页面

任意要分页的页面都可以直接使用
分页逻辑已封装好了，
样式不喜欢可以自己在page.html改改

需要分页的页面别少了这个，不然无法使用layui.js ,也就无法触发事件

   /**
	 * 页面没有layui.use 无法使用layer.msg 提示框，所以我们在这里定义,拷贝到你的每一个需要分页的主页面中即可，有的就不用管了
	 */
	layui.use(['form', 'layedit', 'laydate'], function(){
	        var form = layui.form
	            ,layer = layui.layer
	            ,layedit = layui.layedit
	            ,laydate = layui.laydate;
	});