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

更新时间：2020-09-06 00:12:01 作者：startmvc

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

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

最后展示效果