1.先在pom文件中引入相应的pagehelper依赖
2.在applicationContext.xml中配置相关信息
prop中的值可以自行定义,我这里用的mysql数据所以配置的mysql
3.后端逻辑
不说了直接上代码
controller:
dao层:这里方法参数我是为了限制用户类型访问,如果直接查询可不设置参数直接查询
service层
mapper
4.前端逻辑
前端使用的layui
,templet: function(res){
if(res.username==null){
return "";
}else {
return '<div style="text-align: center">'+res.username+'</div>'
}
}
上述代码只是相对页面展示进行初始化,毕竟页面上空值显示undefined不太好看哈哈。
不说了上代码:
<table class="layui-hide" id="tb" lay-filter="tb" style="text-align: center"></table>
layui.use(['form', 'table','laypage'], function(){
var table = layui.table;
var form =layui.form;
var laypage = layui.laypage;
table.render({
elem: '#tb'
,url:'personManage/userManage'
,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
, limit: 20
, limits: [20, 40, 60]
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用户数据表'
,parseData:function (res) {
console.log(res)
console.log(res.total)
return{
"code":res.code, 此处为后端返回的参数code
"msg": res.msg, 此处为后端返回的参数msg
"count": res.total,此处为后端返回的参数total
data: res.data 此处为后端返回的数据
}
},count:'count'
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field: 'id', title: '序号', width:'6%', fixed: 'left', align:'center',templet: function(res){
return '<div style="text-align: center">'+ res.LAY_INDEX+'</div>';
}}
,{field:'userid', title:'用户名', width:'10%',align:'center', fixed: 'left', /*unresize: true,*/ sort: true,templet: function(res){
console.log("数据表格内res:-------------->"+res.userid)
if(res.userid==null){
return "";
}else {
return '<div style="text-align: center">'+res.userid+'</div>'
}
}}
,{field:'username', title:'姓名',align:'center', width:'10%', edit: 'text',templet: function(res){
if(res.username==null){
return "";
}else {
return '<div style="text-align: center">'+res.username+'</div>'
}
}}
,{field:'userpwd', title:'密码',align:'center', width:'10%', edit: 'text',templet: function(res){
if(res.userpwd==null){
return "";
}else {
return '<div style="text-align: center">'+res.userpwd+'</div>'
}
}}
,{field:'sex', title:'性别',align:'center', width:'10%', edit: 'text',templet: function(res){
if(res.sex==null){
return "";
}else {
return '<div style="text-align: center">'+res.sex+'</div>'
}
}}
,{field:'userdept', title:'所在部门',align:'center', width:'10%', templet: function(res){
if(res.userdept==null){
return "";
}else{
return '<div style="text-align: center">'+res.userdept+'</div>'
}
}}
,{field:'userrole', title:'所属角色',align:'center', width:'10%', templet: function(res){
if(res.userrole==null){
return "";
}else{
return '<div style="text-align: center">'+res.userrole+'</div>'
}
}}
,{field:'usertype', title:'用户类型',align:'center', width:'10%', sort: true,templet: function(res){
if(res.usertype==null){
return "";
}else if(res.usertype =='0'){
return '<div style="text-align: center">'+"普通用户"+'</div>'
}else if(res.usertype =='1'){
return '<div style="text-align: center">'+"系统管理员"+'</div>'
}else if(res.usertype =='2'){
return '<div style="text-align: center">'+"超级管理员"+'</div>'
}
}}
,{field:'userstatus', title:'用户状态',align:'center', width:'10%', sort: true,templet: function(res){
let menuId = res.userstatus;
let userid = res.userid;
if(res.userstatus==null){
return "";
}else if(res.userstatus =='1'){
return '<div style="text-align: center">' +" <input type='checkbox' menuId = '" + menuId + "' userid = '" + userid + "' lay-filter='userstatus' lay-skin='switch' lay-text='启用|禁用' checked>"+'</div>'
}else if(res.userstatus =='0'){
return '<div style=\"text-align: center\">'+" <input type='checkbox' menuId = '" + menuId + "' userid = '" + userid + "' lay-filter='userstatus' lay-skin='switch' lay-text='启用|禁用'>"+'</div>'
}
}}
,{fixed: 'right', title:'操作',align:'center', toolbar: '#barDemo', width:'10%',templet: function(res){
return '<div style="text-align: center">'+res.right+'</div>'
}}
]]
,id:'testReload'
,page: {
layout: ['prev', 'page', 'next','limit','count'] //自定义分页布局
,groups: 3 //只显示 3 个连续页码
,first: '首页' //首页
,prev: '上一页'
,next: '下一页'
,last: '尾页' //尾页
,limit:10
,limits:[10,20,30]
}
,request: {
pageName: 'page' // 页码的参数名称,默认:page
, limitName: 'size' //每页数据量的参数名,默认:limit
},
});
});
好了下面就是页面截图
上图中的msg,total,code均为返回的参数值
下面就是效果图(初始的分页在左边自己加个text-align:center居中就OK)
欢迎各位大佬指正建议,觉得文章可以的话不妨点点关注哦!