基于ssm框架實現(xiàn)layui分頁效果

更新時間：2019年07月27日 16:31:54 作者：小小魚34309335

這篇文章主要為大家詳細介紹了基于ssm框架實現(xiàn)layui分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天完成了基于ssm框架下，layui的分頁操作，現(xiàn)在把核心內(nèi)容分享一下：

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}">網(wǎng)關ID</th>
 <th lay-data="{field:'status', width:150,sort: true}">數(shù)據(jù)</th>
 <th lay-data="{field:'timestamp',width:200,sort: true}">時間日期</th>
 <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">數(shù)據(jù)操作</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;
 //監(jiān)聽表格復選框選擇
 table.on('checkbox(demo)', function(obj){
 console.log(obj)
 });
 //監(jiān)聽工具條
 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(){ //獲取選中數(shù)據(jù)
 var checkStatus = table.checkStatus('idTest')
  ,data = checkStatus.data;
 layer.alert(JSON.stringify(data));
 }
 ,getCheckLength: function(){ //獲取選中數(shù)目
 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(){//方法參數(shù)必須可以獲取到表單數(shù)據(jù)
 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){//方法參數(shù)必須可以獲取到表單數(shù)據(jù)

 System.out.println("進入controller層的meter/query方法********************************************************************************************");
 return meterService.queryData(page,limit);

 }
}

注意是controller層的第二個方法，page和limit是layui框架幫我們自動實現(xiàn)的，默認情況下，page=1,limit=10。page為起始記錄的下標,limit為記錄最后的下標，page并不是指頁數(shù)。

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);//獲取記錄總數(shù)
 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并不是指的頁碼數(shù)，所以分頁時需要換算，具體怎么換算見上面的代碼。

以下是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);

 //分頁查詢數(shù)據(jù)
 List<Meter> queryData(Map<String,Integer> map);

 //查詢數(shù)據(jù)總數(shù)
 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>


 <!--分頁查詢數(shù)據(jù)，根據(jù)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>


 <!--查詢記錄總數(shù)-->
 <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;//成功的狀態(tài)碼，默認：0
 private String msg;//狀態(tài)信息的字段名稱，默認：msg
 private String count;//數(shù)據(jù)總數(shù)的字段名稱，默認：count
 private Object data;//數(shù)據(jù)列表的字段名稱，默認：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 +
 '}';
 }
}

最后展示效果