spring boot +thymeleaf+mybatis+layui 数据表格数据分页的实现

在使用spring boot +thymeleaf+mybatis+layui开发项目的时候,数据列表页必定是少不了的,如下所示: 

spring boot +thymeleaf+mybatis+layui 数据表格数据分页的实现

在此,写下自己开发过程。

layui:

引入layui的css和js和jq文件后,选择layui的数据表格

<table class="layui-hide" id="adminList"></table>

数据表格对应的js为:

<!-- th:inline="none" 属性解决layui的js中[[]]符号与thymeleaf中的冲突 -->
<script  th:inline="none">

layui.use(['table'], function(){
  var table = layui.table;//使用数据表格
  
  table.render({
    elem: '#adminList',//选择html中对应的数据表格ID
    url:'showAdminList',//分页提交到spring boot 代码的映射名称
    method:'POST',
    limit:8,//每页显示的记录数量
    limits:[5,8,10,15,20],//可选择每页显示的数量
    page: true,//开启分页
    
    //设置表头的数组
    //field:后台传回的数字字段名,
    //title:表头文字
    //templet: function(data){} 数据表格请求后台回调函数,处理数据
    //return  表示在对应的列中输出的内容
   	cols: [[ 
   		{type:'checkbox',fixed: 'left'},
   		{field:'id',width:60,title:'ID'},
   		{field:'admin_name', title:'账号'},
   		{field:'admim_truename',title:'真实姓名'},
   		{field:'admin_sex',width:60,title:'性别',
   			templet: function(data){
   				if(data.admin_sex==1){
   					return 	"<span>男</span>";
   				}else if(data.admin_sex==2){
   					return "<span>女</span>";
   				}else{
   					return "<span>保密</span>";
   				}
        	}
   		},   		
   		{field:'create_ip',title:'操作ip',
   			templet: function(data){
   				if(data.create_ip=='0:0:0:0:0:0:0:1'){
   					return "<span>127.0.0.1</span>";
   				}else{
   					return "<span>"+data.create_ip+"</span>";
   				}
   			}
   		},
   		{field:'state',width:80,title:'状态',
   			templet: function(data){
   				if(data.state==1){
   					return "<span>正常</span>";
   				}else{
   					return "<span>受限</span>";
   				}
   			}
   		},
   		{fixed: 'right',title:'操作',width:150,
   			templet: function(data){
   				return 	"<a href='AdminInfo?id="+data.id+"' title='查看' class='layui-btn layui-btn-xs layui-btn-normal'><icon class='layui-icon'>&#xe60b;</icon></a>"+
   						"<a href='' title='编辑' class='layui-btn layui-btn-xs layui-btn-normal'><icon class='layui-icon'>&#xe642;</icon></a>"+
   						"<a href='' title='删除' class='layui-btn layui-bg-red layui-btn-xs layui-btn-normal'><icon class='layui-icon'>&#xe640;</icon></a>";
   			}	
   		}
    ]],
    done:function(res, curr, count){
    	console.log("表格渲染完成:");
    	console.log(res);
    	console.log(curr);
    	console.log(count);
    }
    
  });
});

</script>

layui请求的springboot后台代码为:

interface(使用注解方式)部分,文件名:Ssm_adminMapper:

/**
	 * 分页,查找所有的管理员
	 * 参数:limits 查询需要显示的记录,page每页显示的记录数
	 * 返回值:List<Ssm_adminModel>
	 * */
	@Select(  "select id,admin_name,admim_truename,admin_sex,create_ip,state "
			+ "from ssm_admin "
			+ "order by id desc "
			+ " limit #{limits},#{page}")
	public List<Ssm_adminModel> page_GetAllAdmin(@Param("limits") int limits,@Param("page") int page);

用于查询统计所有记录数的接口方法:

/**
	 * 统计管理员记录数
	 * 参数:
	 * 返回值:int 管理员总数
	 * */
	@Select("select count(id) from ssm_admin")
	public int CountAllAdmin();

dao层处理逻辑:

分页主要查询的数据方法:

/**
	 * 分页 查找 所有的管理员
	 * 参数:每页显示的记录数:pageSize,当前显示的页码:pageNow
	 * 返回值:List<Ssm_adminModel> 
	 * @throws IOException 
	 * */
	public List<Ssm_adminModel> page_getAllAdmin(int pageSize,int pageNow) throws IOException{
		SqlSession sql_session = MybatisUtil.openSession();
		Ssm_adminMapper adminMapper = sql_session.getMapper(Ssm_adminMapper.class);
		//(pageNow-1)*pageSize 需要查询的记录数   pageNow:每页显示的数量
		List<Ssm_adminModel> list = adminMapper.page_GetAllAdmin((pageNow-1)*pageSize,pageSize);
		if(list!=null) {
			return list;
		}
		return null;
	}

统计所有的管理员方法:

/**
	 * 统计所有管理员数量
	 * 参数:
	 * 返回值:int 管理员数量
	 * @throws IOException 
	 * */
	public int CountAllAdmin() throws IOException {
		SqlSession sql_session = MybatisUtil.openSession();
		Ssm_adminMapper adminMapper = sql_session.getMapper(Ssm_adminMapper.class);
		int count = adminMapper.CountAllAdmin();
		if(count>0) {
			return count;
		}
		return 0;
	}
	

 

controller层,接收前端传递的数据。前端数据表格开启分页之后,点击页码或者其他的切换页面的操作都会向后台目标方法中传递两个参数,limit和page ,limit 为前台设置的每页显示的记录数,page为当前选择的页码。

//显示管理员列表 
	//每页显示的记录数:pageSize,当前显示的页码:pageNow
	@RequestMapping("showAdminList")
	@ResponseBody()
	public LayuiTableResultUtil<List> showAdminList(Model model,HttpServletRequest request) throws IOException {
		//Required 只是用于判断前端是否有数据传递到此处
		RequiredUtil Required = new RequiredUtil();
		if(!Required.Required(request.getParameter("limit").trim())) {			
			return new LayuiTableResultUtil<List>("分页异常",null,1,10);
		}
		if(!Required.Required(request.getParameter("page").trim())) {			
			return new LayuiTableResultUtil<List>("分页异常",null,1,10);
		}
		
		int limit = Integer.parseInt(request.getParameter("limit").trim());//每页显示的记录数
		int page = Integer.parseInt(request.getParameter("page").trim());//当前显示的页码
		
        //查找所有管理员
		Ssm_adminDao adminDao = new Ssm_adminDao();
		List<Ssm_adminModel> adminList = adminDao.page_getAllAdmin(limit,page);	
	
		
		int countAdmin = adminDao.CountAllAdmin();//所有管理员的数量
		
        //LayuiTableResultUtil 工具类封装了layui的数据表格的返回数据格式 countAdmin:为查询的记录总数
		LayuiTableResultUtil<List> list=new LayuiTableResultUtil<List>("",adminList,0,countAdmin);
		
		
		if(adminList!=null) {
			return list;
		}
		return null;
		
	}

RequiredUtil工具类: 

package com.example.demo.mybatisUtil;

public class RequiredUtil {
	
	/**
	 * 判断request中的getParameter是否有值
	 * 参数:int  
	 * 返回值:Boolean
	 * */
	public Boolean Required(int i) {
		Boolean flage = false;
		if(i>0) {
			flage = true;
		}
		return flage;
	}
	
	/**
	 * 判断request中的getParameter是否有值
	 * 参数:String  
	 * 返回值:Boolean true:有值    false:无值 
	 * */
	public Boolean Required(String i) {
		Boolean flage = false;
		if(i.length()>0||i!=null||i!="") {
			System.out.println("Required:【"+i+"】");
			flage = true;
		}
		System.out.println("Required:"+flage);
		return flage;
	}
	
	
}

 

LayuiTableResultUtil工具类:

package com.example.demo.mybatisUtil;

/**
 * 
 * layui数据表格返回数据处理类
 * msg:返回的信息
 * data:返回的数据
 * code:状态编码
 * count:总记录数
 */
public class LayuiTableResultUtil<T> {
    private String msg;
    private  T data;
    private  int code;
    private  int count;
 
    public String getMsg() {
        return msg;
    }
 
    public void setMsg(String msg) {
        this.msg = msg;
    }
 
    public T getData() {
        return data;
    }
 
    public void setData(T data) {
        this.data = data;
    }
 
    public int getCode() {
        return code;
    }
 
    public void setCode(int code) {
        this.code = code;
    }
 
    public int getCount() {
        return count;
    }
 
    public void setCount(int count) {
        this.count = count;
    }
 
    public LayuiTableResultUtil(String msg, T data, int code, int count) {
        this.msg = msg;
        this.data = data;
        this.code = code;
        this.count = count;
    }
 
    public LayuiTableResultUtil() {
    }

	@Override
	public String toString() {
		return "LayuiTableResult [msg=" + msg + ", data=" + data + ", code=" + code + ", count=" + count + "]";
	}
    
    
}