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

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

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

序号应用ID服务ID设备ID网关ID数据时间日期数据操作

查看

编辑

删除

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('编辑行：
'+ 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) : '';

});

});

2.后端的关键代码：

controller层代码

package com.cn.controller;

import com.cn.model.Meter;

import com.cn.model.ResponseData;

import com.cn.service.MeterService;

import com.cn.testexam