南强小屋 Design By 杰米
今天完成了基于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="/UploadFiles/2021-04-02/layui.js">
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对应文件见下面
<"1.0" encoding="UTF-8" "-//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 +
'}';
}
}
最后展示效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
ssm,layui,分页
南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米
暂无基于ssm框架实现layui分页效果的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
