今天完成了基于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>