基于地对地导弹框架实现获得分页效果

今天完成了基于地对地导弹框架下，layui的分页操作，现在把核心内容分享一下：

1.前端页面的关键代码，基于html5

！-自动渲染-table class=' layui-table ' lay-data=' { cellmin width :100，height:'full-500 '，url:'meter/query '，page:true，id : ' idTest ' } ' lay-filter=' demo '和tr th lay-data=' { type : ' checkbox '，fixed : ' left ' } '/th lay-data=' { field 33: '序号/th lay-data=' { field : ' AppID，width:300，sort:true } '应用身份证/第层-数据='{field:'serviceId '，sort: true} '服务身份证/第层-数据='{field:'deviceId '，width:300，sort: true} '设备身份证/第层数据='{field:'gatewayId '，width:300，sort: true} '网关身份证/第层-数据='{field:'status '，width:150，sort: true} '数据/th层-数据='{field:'timestamp '，width:200，sort: true} '时间日期/th lay-data=' { fixed : ' right '，width:178，align:'center '，toolbar: '#barDemo'} '数据操作/th /tr /thead/table！-每一条记录最后的操作栏-脚本类型=' 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-BTNlayui-BTN-danger layui-BTN-xs ' lay-event=' del '删除/a/script script src=' http : statics/layui/layui。js ' charset=' utf-8 '/脚本！-注意：如果你直接复制所有代码到本地，上述射流研究…路径需要改成你本地的- script layui.use(['form '，' layer '，' layedit '，' laydate '，' upload '，' table']，function(){ var form=layui。形式；layer=parent.layer===undefined？layui.layer : top.layer，laypage=layui.laypage，upload=layui.upload，lay dit=layui。lay dit，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。数据；如果。事件==' detail '){ layer。消息('标识：'数据。标识')的查看操作');} else if(obj。event==' del '){ layer。确认('真的删除行么，函数(索引){ obj。del()；layer.close(索引);});} else if(obj。事件==='编辑'){图层。警报('编辑行：br ' JSON。stringify(data))})；var active={ getCheckData: function(){//获取选中数据var CheckStatus=table。CheckStatus(' IdTest ')，数据=checkStatus.datalayer。警报(JSON。stringify(数据))；}，getCheckLength:函数(){ //获取选中数目var CheckStatus=table。CheckStatus(' IdTest ')，数据=checkStatus.datalayer.msg('选中了：“data.length”个');}，isAll:函数(){ //验证是否全选var CheckStatus=table。check status(' IdTest ')；layer.msg(checkStatus.isAll '？全选': '未全选') } };$('.可降级拉伊-BTN ' .on('click ')，function(){ var type=$(this).数据(“type”)；活动[类型]?活动[类型]。拨打（此):"";});});/script2 .后端的关键代码：

控制器层代码

打包。cn。控制器；导入com。cn。模特。仪表；导入com。cn。模特。回应Ta；导入com。cn。ServiCe。meter ServiCe导入com。cn。testexampleid。服务。数据收集。myquerydevicehistorydata导入组织。弹簧框架。刻板印象。控制器；导入组织。弹簧框架。网络。绑定。注释。请求映射；导入组织。弹簧框架。网络。绑定。注释。请求方法；导入组织。弹簧框架。网络。绑定。注释。反应体；导入javax。注释。资源；导入Java。乌提尔。ArrayList导入Java。乌提尔。列表；/** *由颜康于2018/6/4创建*/@控制器@请求映射("/仪表")公共类仪表控制器{ @资源私有仪表服务仪表服务；@RequestMapping(值='/add '，方法=RequestMethod .GET)public void addBathMeter(){//方法参数必须可以获取到表单数据System.out.println('进入添加沐浴计的控制层方法**********************************************************************************');ListMeter仪表列表=new ArrayList()；尝试{仪表列表=myquerydevicehistorydata。fun()；} catch(异常e){ e . print stack trace()；}仪表服务。添加血糖仪(血糖仪列表)；} @RequestMapping(值='/query '，方法=RequestMethod .GET)@响应体公共响应ta查询数据(int page，int limit){//方法参数必须可以获取到表单数据System.out.println('进入控制器层的仪表/查询方法********************************************************************************************');返回meterService.queryData(页面，限制);}}注意是控制器层的第二个方法，第页和限制是获得框架帮我们自动实现的，默认情况下，page=1，limit=10。页为起始记录的下标，极限为记录最后的下标，第页并不是指页数。

服务层代码：

包装com.cn.service；导入com。cn。映射器。仪表映射器；导入com。cn。模特。仪表；导入com。cn。模特。回应Ta；import org.springframework。刻板印象。服务；导入组织。弹簧框架。交易。注释。隔离；导入组织。弹簧框架。交易。注释。传播；导入组织。弹簧框架。交易。注释。交易性的；导入javax。注释。资源；导入Java。乌提尔。HashMap导入Java。乌提尔。列表；导入Java。乌提尔。地图；/** *由颜康于2018/6/4创建*/@服务(“计量服务”)公共类MeterServiceImpl实现了MeterService { @资源私有的仪表映射器；@Override @Transactional(传播=传播需要_新，隔离=隔离DEFAULT，回滚=异常。class)public void addBathMeter(list meter list){ system。出去。println('进入添加沐浴计的服务层方法*********************************************************************************');仪表映射器。addbathsclient(仪表列表)；} @ Override @ Transactional(readOnly=true)//page默认是从一开始的公共响应查询数据(int page，int limit) { System.out.println('进入meterService层的查询数据方法**************************************************************************************************');响应Ta rd=新响应Ta()；列表计量表；System.out.println('页的值：' page ' * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *)；第=(第-1页)*限制；System.out.println('页变换之后的值：' page ' * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *)；System.out.println('限制的值：' limit ' * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *)；请尝试{ rd。setcode(' 0 ')；int num=仪表映射器。查询计数()；System.out.println('num的值为：‘num’* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *)；字符串snum=num研发。setcount(snum)；//获取记录总数MapString，Integer map=new HashMap()；map.put('page '，page)；//从第几页开始map.put('limit '，limit)；//每页显示多少条记录仪表列表=仪表映射器。querydata(地图)；研发。setdata(仪表列表)；rd.setMsg(')请求成功');} catch(Exception ex){ ex。print stack trace()；}返回研发；}}由于页并不是指的页码数，所以分页时需要换算，具体怎么换算见上面的代码。

以下是制图人层代码

包装com.cn.mapper；导入com。cn。模特。客户；导入com。cn。模特。仪表；导入组织。弹簧框架。刻板印象。组件；导入Java。乌提尔。HashMap导入Java。乌提尔。列表；导入Java。乌提尔。地图；/** *由管理员于2018-04-17创建。*/@组件('仪表映射器)公共接口仪表映射器{ //增加客户信息void addBathClient(列表计量表计量表);//分页查询数据ListMeter查询数据(映射字符串，整数映射);//查询数据总数int查询计数()；}xml对应文件见下面

？可扩展标记语言版本='1.0 '编码='UTF-8 '？DOCTYPE Mapper PUBLIC '-//我的蜡染。org//DTD Mapper 3.0//EN ' http://my batis。org/DTD/my batis-3-Mapper。' DTD '映射器命名空间='com.cn.mapper.MeterMapper '！-批量增加客户信息-insert id=' addbathsclient '参数类型=' Java。乌提尔。数组列表'插入到每个通道的TB _ meter(appId，serviceId，deviceId，gatewayId，状态，时间戳)值中集合=' list '项=' item '分隔符='，'(#{item.appId}，#{item.serviceId}，#{item.deviceId}，#{item.gatewayId}，#{item.status}，#{item。时间戳})/foreach/insert！-分页查询数据，根据限制和页进行分页-SELECT id=' queryData '参数类型=' Map '结果类型=' com。cn。模特。仪表' SELECT id，appId，serviceId，deviceId，gatewayId，状态，时间戳FROM TB _ meter if test='页面！=null和极限！=null' limit #{page}，#{limit} /if /select！-查询记录总数-SELECT id='查询计数'结果类型=' Java。朗。整数'选择计数(*)从TB _米/选择/映射模式层代码

公共类米实现可序列化{私有整数id；私有字符串应用编号私有字符串服务标识；私有字符串设备标识；私有字符串gatewayId私有整数状态；私有字符串时间戳；公共仪表(){ }公共仪表(整数标识、字符串服务标识、字符串应用标识、字符串设备标识、字符串网关标识、整数状态，字符串时间戳){ this.id=idthis。ServiCe id=ServiCe idthis.appId=appIdthis。设备id=设备id；this . GateWayid=GateWayid this . status=status this . timestamp=时间戳；} public Integer GetID(){ return id；} public void SetID(Integer id){ this。id=id} public String GetPPid(){ return appId；} public void setAppId(String appId){ this。appId=appId} public String getServiceId(){返回服务id；} public void setServiceId(String service id){ this。服务id=服务id；}公共字符串getDeviceId(){ 0返回deviceId}公共void setdevice id(String device id){ this。deviceId=deviceId} public String get gateway id(){ return gateway id；} public void set gateway id(String gateway id){ this。网关id=网关id；}公共整数GetStatus(){ 0返回状态；} public void setStatus(整数状态){ this . status=status } public String getTimestamp(){ return timestamp；} public void setTimestamp(String时间戳){ this。时间戳=时间戳；} @将公共字符串重写为String(){返回“Meter“”appId=“”appId“\””、service id=“”service id“\”、deviceId=“”deviceId“\”、gateway id=“”gateway id“\”、status=“status”、timestamp=“timestamp”\“}”；} }响应的代码：

包装com.cn.model；导入Java。io。可序列化；/** *由颜康于2018年5月31日创作*/公共类回应达实现可序列化的{私有字符串代码；//成功的状态码，默认：0私有字符串消息；//状态信息的字段名称，默认：消息私有字符串计数；//数据总数的字段名称，默认：统计私有对象数据；//数据列表的字段名称，默认：数据公共响应数据(){ }公共响应数据(字符串代码、字符串消息、字符串计数、对象数据){ this . code=code this . msg=msgthis . count=count this . data=数据；}公共字符串GetCode(){ 0返回代码；} public void setCode(String code){ this。code=code} public String getMsg(){ return msg；} public void setMsg(String msg){ this。味精=味精；} public String getCount(){ return count；} public void setCount(String count){ this。计数=计数；}公共对象getData(){ 0返回数据；} public void setData(Object data){ this。数据=数据；} @ Override public String ToString(){ return ' response Ta { ' code=' code ' \ '，msg=' ' msg ' \ ' '，count=' ' count ' \ '，data=' data ' }}}最后展示效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。