基於ssm框架下的layui分頁實現

今天完成了基於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分頁實現

工作中用到的腳本合集

24-5-18 X

基於ssm框架下的layui分頁實現

boa web服務器html頁面顯示不了css等樣式的解決辦法

java實現猴子喫桃問題

中國電信物聯網開發平臺北向開發獲取設備ID及其歷史產生的數據

C#連接access數據庫sql語句出現問題的解決方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結