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

前端  /  管理员 发布于 4年前   337

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

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

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

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 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 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 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 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 meterList); //分页查询数据 List queryData(Map map); //查询数据总数 int queryCount();}

xml对应文件见下面

   insert into tb_meter (appId,serviceId,deviceId,gatewayId,status,timestamp) VALUES  (#{item.appId},#{item.serviceId},#{item.deviceId},#{item.gatewayId},#{item.status},#{item.timestamp})     SELECT id,appId,serviceId,deviceId,gatewayId,status,timestamp FROM tb_meter  limit #{page},#{limit}     SELECT count(*) FROM tb_meter 

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 + '}'; }}

最后展示效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• layui.js实现的表单验证功能示例
• 使用layui 的layedit定义自己的toolbar方法