今天完成了基于ssm框架下，layui的分页操作，现在把核心内容分享一下：
1.前端页面的关键代码，基于html5
<!--自动渲染--> <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"> <a lay-event="detail">查看</a> <a lay-event="edit">编辑</a> <a lay-event="del">删除</a> </script> <script src="https://www.jb51.net/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层代码