基于ssm框架实现layui分页效果

今天完成了基于ssm框架下，layui的分页操作，现在把核心内容分享一下：

1.前端页面的关键代码，基于html5

<!--自动渲染--><table class="layui-table" lay-data="{cellMinWidth:100, height:'full-500', url:'meter/query', page:true, id:'idTest'}" lay-filter="demo"> <thead> <tr> <th lay-data="{type:'checkbox', fixed: 'left'}"></th> <th lay-data="{field:'id',sort:true}">序号</th> <th lay-data="{field:'appId', width:300,sort:true}">应用ID</th> <th lay-data="{field:'serviceId', sort: true}">服务ID</th> <th lay-data="{field:'deviceId', width:300,sort: true}">设备ID</th> <th lay-data="{field:'gatewayId', width:300,sort: true}">网关ID</th> <th lay-data="{field:'status', width:150,sort: true}">数据</th> <th lay-data="{field:'timestamp',width:200,sort: true}">时间日期</th> <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">数据操作</th> </tr> </thead></table><!--每一条记录最后的操作栏--><script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script><script src="statics/layui/layui.js" charset="utf-8"></script><!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --><script> layui.use(['form','layer','layedit','laydate','upload','table'],function(){ var form = layui.form; layer = parent.layer === undefined ? layui.layer : top.layer, laypage = layui.laypage, upload = layui.upload, layedit = layui.layedit, laydate = layui.laydate, $ = layui.jquery, table = layui.table; //监听表格复选框选择 table.on('checkbox(demo)', function(obj){ console.log(obj) }); //监听工具条 table.on('tool(demo)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ layer.msg('ID：'+ data.id + ' 的查看操作'); } else if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){  obj.del();  layer.close(index); }); } else if(obj.event === 'edit'){ layer.alert('编辑行：<br>'+ JSON.stringify(data)) } }); var active = { getCheckData: function(){ //获取选中数据 var checkStatus = table.checkStatus('idTest')  ,data = checkStatus.data; layer.alert(JSON.stringify(data)); } ,getCheckLength: function(){ //获取选中数目 var checkStatus = table.checkStatus('idTest')  ,data = checkStatus.data; layer.msg('选中了：'+ data.length + ' 个'); } ,isAll: function(){ //验证是否全选 var checkStatus = table.checkStatus('idTest'); layer.msg(checkStatus.isAll ? '全选': '未全选') } }; $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); });</script>