记录一次 ssm下 pagehelper +layui

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）

欢迎各位大佬指正建议，觉得文章可以的话不妨点点关注哦！