基于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 相关文章推荐
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
vue.js学习之递归组件
Dec 13 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
使用vant的地域控件追加全部选项
Nov 03 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统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
javascript 闭包
2011/09/15 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python实现随机漫步功能
2018/07/09 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
计算机实训报告范文
2014/11/05 职场文书
公司员工培训管理制度
2015/08/04 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js