基于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 相关文章推荐
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
AngularJS语法详解
Jan 23 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP 采集程序原理分析篇
2010/03/05 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
php中apc缓存使用示例
2013/12/25 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
JointJS流程图的绘制方法
2018/12/03 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
简述数据库的设计过程
2015/06/22 面试题
一道Delphi上机题
2012/06/04 面试题
仓管员岗位职责范文
2013/11/08 职场文书
大学自荐信
2013/12/12 职场文书
驻村工作先进事迹
2014/08/14 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
机动车交通事故协议书
2015/01/29 职场文书
大雁塔导游词
2015/02/04 职场文书
企业法人代表证明书
2015/06/18 职场文书
旅游投诉信范文
2015/07/02 职场文书
2015年度女工工作总结
2015/10/22 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android