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


Posted in Javascript onJuly 27, 2019

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

最后展示效果

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
Position属性之relative用法
Dec 14 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
vue 图片裁剪上传组件的实现
Nov 12 Javascript
layUI实现前端分页和后端分页
Jul 27 #Javascript
layui实现数据分页功能(ajax异步)
Jul 27 #Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 #Javascript
layui实现数据分页功能
Jul 27 #Javascript
layUI实现列表查询功能
Jul 27 #Javascript
Layui实现带查询条件的分页
Jul 27 #Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 #Javascript
You might like
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
js读取注册表的键值示例
2013/09/25 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
Python AES加密模块用法分析
2017/05/22 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
大学生个人总结的自我评价
2013/10/05 职场文书
物流仓储计划书
2014/01/10 职场文书
教学大赛获奖感言
2014/01/15 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
2014年营业员工作总结
2014/11/18 职场文书
小学生手册家长意见
2015/06/03 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
Python保存并浏览用户的历史记录
2022/04/29 Python
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android
Python+pyaudio实现音频控制示例详解
2022/07/23 Python