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);

java部分的代码以及工具类在订阅号中........(懒~~~~~~)