基于ssm框架实现layui分页效果
时间：2020-10-11 10:45:21|栏目：JavaScript代码|点击： 次
今天完成了基于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>
2.后端的关键代码：
controller层代码
package com.cn.controller;
import com.cn.model.Meter;
import com.cn.model.ResponseData;
import com.cn.service.MeterService;
import com.cn.testexampleid.service.dataCollection.MyQueryDeviceHistoryData;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;
/**
* Created by yankang on 2018/6/4.
*/
@Controller
@RequestMapping("/meter")
public class MeterController {
@Resource
private MeterService meterService;
@RequestMapping(value="/add",method = RequestMethod.GET)
public void addBathMeter(){//方法参数必须可以获取到表单数据
System.out.println("进入addBathMeter的controll层方法**********************************************************************************");
List<Meter> meterList= new ArrayList<>();
try {
meterList= MyQueryDeviceHistoryData.fun();
} catch (Exception e) {
e.printStackTrace();
}
meterService.addBathMeter(meterList);
}
@RequestMapping(value="/query",method = RequestMethod.GET)
@ResponseBody
public ResponseData queryData(int page,int limit){//方法参数必须可以获取到表单数据
System.out.println("进入controller层的meter/query方法********************************************************************************************");
return meterService.queryData(page,limit);
}
}
注意是controller层的第二个方法，page和limit是layui框架帮我们自动实现的，默认情况下，page=1,limit=10。page为起始记录的下标,limit为记录最后的下标，page并不是指页数。
service层代码：
package com.cn.service;
import com.cn.mapper.MeterMapper;
import com.cn.model.Meter;
import com.cn.model.ResponseData;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Isolation;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* Created by yankang on 2018/6/4.
*/
@Service("meterService")
public class MeterServiceImpl implements MeterService{
@Resource
private MeterMapper meterMapper;
@Override
@Transactional(propagation = Propagation.REQUIRES_NEW,isolation= Isolation.DEFAULT,rollbackFor=Exception.class)
public void addBathMeter(List<Meter> meterList) {
System.out.println("进入addBathMeter的service层方法*********************************************************************************");
meterMapper.addBathClient(meterList);
}
@Override
@Transactional(readOnly = true)//page默认是从1开始的
public ResponseData queryData(int page, int limit) {
System.out.println("进入meterService层的queryData方法**************************************************************************************************");
ResponseData rd=new ResponseData();
List<Meter> meterList;
System.out.println("page的值："+page+"****************************************************************************************************************");
page=(page-1)*limit;
System.out.println("page变换之后的值："+page+"****************************************************************************************************************");
System.out.println("limit的值："+limit+"***************************************************************************************************************");
try {
rd.setCode("0");
int num=meterMapper.queryCount();
System.out.println("num的值为：" + num + "*****************************************************************************************************");
String snum=num+"";
rd.setCount(snum);//获取记录总数
Map<String,Integer> map = new HashMap<>();
map.put("page",page);//从第几页开始
map.put("limit",limit);//每页显示多少条记录
meterList = meterMapper.queryData(map);
rd.setData(meterList);
rd.setMsg("请求成功");
}catch(Exception ex){
ex.printStackTrace();
}
return rd;
}
}
由于page并不是指的页码数，所以分页时需要换算，具体怎么换算见上面的代码。
以下是mapper层代码
package com.cn.mapper;
import com.cn.model.Client;
import com.cn.model.Meter;
import org.springframework.stereotype.Component;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* Created by Administrator on 2018-04-17.
*/
@Component("MeterMapper")
public interface MeterMapper {
//增加客户信息
void addBathClient(List<Meter> meterList);
//分页查询数据
List<Meter> queryData(Map<String,Integer> map);
//查询数据总数
int queryCount();
}
xml对应文件见下面
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.cn.mapper.MeterMapper">
<!--批量增加客户信息-->
<insert id="addBathClient" parameterType="java.util.ArrayList" >
insert into tb_meter (appId,serviceId,deviceId,gatewayId,status,timestamp)
VALUES
<foreach collection="list" item="item" separator=",">
(#{item.appId},#{item.serviceId},#{item.deviceId},#{item.gatewayId},#{item.status},#{item.timestamp})
</foreach>
</insert>
<!--分页查询数据，根据limit和page进行分页-->
<select id="queryData" parameterType="Map" resultType="com.cn.model.Meter">
SELECT id,appId,serviceId,deviceId,gatewayId,status,timestamp
FROM tb_meter
<if test="page!=null and limit!=null">
limit #{page},#{limit}
</if>
</select>
<!--查询记录总数-->
<select id="queryCount" resultType="java.lang.Integer">
SELECT count(*) FROM tb_meter
</select>
</mapper>
model层代码
public class Meter implements Serializable{
private Integer id;
private String appId;
private String serviceId;
private String deviceId;
private String gatewayId;
private Integer status;
private String timestamp;
public Meter() {
}
public Meter(Integer id, String serviceId, String appId, String deviceId, String gatewayId, Integer status, String timestamp) {
this.id = id;
this.serviceId = serviceId;
this.appId = appId;
this.deviceId = deviceId;
this.gatewayId = gatewayId;
this.status = status;
this.timestamp = timestamp;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getAppId() {
return appId;
}
public void setAppId(String appId) {
this.appId = appId;
}
public String getServiceId() {
return serviceId;
}
public void setServiceId(String serviceId) {
this.serviceId = serviceId;
}
public String getDeviceId() {
return deviceId;
}
public void setDeviceId(String deviceId) {
this.deviceId = deviceId;
}
public String getGatewayId() {
return gatewayId;
}
public void setGatewayId(String gatewayId) {
this.gatewayId = gatewayId;
}
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
public String getTimestamp() {
return timestamp;
}
public void setTimestamp(String timestamp) {
this.timestamp = timestamp;
}
@Override
public String toString() {
return "Meter{" +
"appId='" + appId + '\'' +
", serviceId='" + serviceId + '\'' +
", deviceId='" + deviceId + '\'' +
", gatewayId='" + gatewayId + '\'' +
", status=" + status +
", timestamp='" + timestamp + '\'' +
'}';
}
}
ResponseData的代码：
package com.cn.model;
import java.io.Serializable;
/**
* Created by yankang on 2018/5/31.
*/
public class ResponseData implements Serializable{
private String code;//成功的状态码，默认：0
private String msg;//状态信息的字段名称，默认：msg
private String count;//数据总数的字段名称，默认：count
private Object data;//数据列表的字段名称，默认：data
public ResponseData() {
}
public ResponseData(String code, String msg, String count, Object data) {
this.code = code;
this.msg = msg;
this.count = count;
this.data = data;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public String getCount() {
return count;
}
public void setCount(String count) {
this.count = count;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
@Override
public String toString() {
return "ResponseData{" +
"code='" + code + '\'' +
", msg='" + msg + '\'' +
", count='" + count + '\'' +
", data=" + data +
'}';
}
}
最后展示效果
