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

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


@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;


@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;


@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;


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

最后展示效果

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