您的位置：首页 > 产品设计 > UI/UE

layui分页和模板引擎

2018-04-02 11:30 267 查看

模板引擎<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="stylesheet" type="text/css" href="/autocarrier/mystatic/plugin/layui/css/layui.css" /></head><body><div id="view" class="container-fluid"></div><script src="/autocarrier/mystatic/js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script><script src="/autocarrier/mystatic/plugin/layui/layui.js"></script></body><script id="demo" type="text/html">{{# layui.each(dataobj, function(index, value){ }}<div style="background-color:{{index%2==0?'whitesmoke':'white'}} ;padding: 3px 0;margin: 3px 0;"><table class="table" style="margin: 10px 0;"><tr><td colspan="4" style="border:hidden"><div style="float: left;"><span class="h4">{{value.placeOfLoading}}</span><span class="glyphicon glyphicon-arrow-right"></span><span class="h4">{{value.goodsReceiptPlace}}</span></div><div style="float: right;"><button type="button" class="btn btn-info" onclick="baojia({{value}})">我要报价</button></div></td></tr></table></div>{{# }); }}</script><script type="text/javascript">data= {"list":[{"id":"4028b8816265963001626596304d0000","placeOfLoading":"山东省-枣庄市-山亭区","countrySubdivisionCodeFrom":null,"consignor":"wxf","consignorMobilePhoneNumber":"18632871252","placeOfLoadingDetail":"山东省枣庄市滕州市","goodsReceiptPlace":"山东省-威海市-文登区","countrySubdivisionCodeTo":null,"consignee":"234","consigneeMobilePhoneNumber":"13269491680","goodsReceiptPlaceDetail":"山东省威海市文登区米山东路西6","identityInfo":null,"creditInfo":null,"businessTypeCode":"1002996","cargoTypeClassification":"","cargoTypeClassificationCode":null,"goodsWeightTotal":"0.0","goodsCubeTotal":"0.0","vehicleLength":"","vehicleWidth":"","vehicleHeight":"","vehicleTonnage":"","vehicleClassification":"0","vehicleClassificationCode":null,"monetaryAmountMin":"","monetaryAmountMax":"","planTime":"","planArriveTime":"","lastTime":"","transportStatus":null,"remark":"","createTime":"2018-03-27 11:52:43","progressSituation":"竞价中","accountId":"2","updateTime":null,"carrierContractId":null,"totalMonetaryAmount":null,"goodsPublishDetails":null,"sendCar":null},{"id":"297e902362507a0c016250a54e33000d","placeOfLoading":"河北省保定市","countrySubdivisionCodeFrom":null,"consignor":"玩儿","consignorMobilePhoneNumber":"13257489652","placeOfLoadingDetail":"河北省保定市莲池区建华大街 552号","goodsReceiptPlace":"河北省冀州","countrySubdivisionCodeTo":null,"consignee":"刚发的","consigneeMobilePhoneNumber":"13574185296","goodsReceiptPlaceDetail":"河北省衡水市冀州区冀州镇393省道北(冀州区公安局交警大队车管所东南350米)","identityInfo":null,"creditInfo":null,"businessTypeCode":null,"cargoTypeClassification":"/手机","cargoTypeClassificationCode":null,"goodsWeightTotal":"1.0","goodsCubeTotal":"1.0","vehicleLength":"送人头","vehicleWidth":"市","vehicleHeight":"对方过后","vehicleTonnage":"对对对","vehicleClassification":"0","vehicleClassificationCode":null,"monetaryAmountMin":"202","monetaryAmountMax":"2222","planTime":"2018-03-27 18:50:09","planArriveTime":"2018-03-25 13:25:09","lastTime":"2018-03-27 13:05:09","transportStatus":null,"remark":"巨化股份但是","createTime":"2018-03-23 10:17:13","progressSituation":"竞价中","accountId":"4c40040449054552bd4486fba77da3f3","updateTime":null,"carrierContractId":null,"totalMonetaryAmount":null,"goodsPublishDetails":null,"sendCar":null},{"id":"297e902362507a0c016250a24331000b","placeOfLoading":"河北省张家口市","countrySubdivisionCodeFrom":null,"consignor":"刘发v","consignorMobilePhoneNumber":"13341526387","placeOfLoadingDetail":"河北省张家口市桥东区中兴北路辅路","goodsReceiptPlace":"河北省保定市","countrySubdivisionCodeTo":null,"consignee":"腾龙","consigneeMobilePhoneNumber":"13114785296","goodsReceiptPlaceDetail":"河北省保定市莲池区裕华西路 725号","identityInfo":null,"creditInfo":null,"businessTypeCode":null,"cargoTypeClassification":"/杯子","cargoTypeClassificationCode":null,"goodsWeightTotal":"1.0","goodsCubeTotal":"1.0","vehicleLength":"反倒是","vehicleWidth":"地方","vehicleHeight":"地方","vehicleTonnage":"电饭煲","vehicleClassification":"0","vehicleClassificationCode":null,"monetaryAmountMin":"20","monetaryAmountMax":"80","planTime":"2018-03-24 10:30:08","planArriveTime":"2018-03-24 13:25:08","lastTime":"2018-03-25 13:25:08","transportStatus":null,"remark":"22222222222","createTime":"2018-03-23 10:13:54","progressSituation":"竞价中","accountId":"4c40040449054552bd4486fba77da3f3","updateTime":null,"carrierContractId":null,"totalMonetaryAmount":null,"goodsPublishDetails":null,"sendCar":null},{"id":"297e902362507a0c0162509fa8db0009","placeOfLoading":"河北省秦皇岛市海港区","countrySubdivisionCodeFrom":null,"consignor":"是的法规和吗","consignorMobilePhoneNumber":"15147485962","placeOfLoadingDetail":"河北省秦皇岛市海港区河北大街东段 56号","goodsReceiptPlace":"河北省衡水市武邑县","countrySubdivisionCodeTo":null,"consignee":"大法官好吗","consigneeMobilePhoneNumber":"15147485963","goodsReceiptPlaceDetail":"地方规划局","identityInfo":null,"creditInfo":null,"businessTypeCode":null,"cargoTypeClassification":"/规划局，","cargoTypeClassificationCode":null,"goodsWeightTotal":"4.0","goodsCubeTotal":"4.0","vehicleLength":"","vehicleWidth":"","vehicleHeight":"","vehicleTonnage":"","vehicleClassification":"0","vehicleClassificationCode":null,"monetaryAmountMin":"","monetaryAmountMax":"","planTime":"","planArriveTime":"","lastTime":"","transportStatus":null,"remark":"","createTime":"2018-03-23 10:11:03","progressSituation":"竞价中","accountId":"4c40040449054552bd4486fba77da3f3","updateTime":null,"carrierContractId":null,"totalMonetaryAmount":null,"goodsPublishDetails":null,"sendCar":null},{"id":"297e902362507a0c0162509b07280007","placeOfLoading":"河北省衡水市武邑县","countrySubdivisionCodeFrom":null,"consignor":"俺师傅的说法","consignorMobilePhoneNumber":"15215426325","placeOfLoadingDetail":"水电费规划局","goodsReceiptPlace":"河北省衡水市武邑县","countrySubdivisionCodeTo":null,"consignee":"淡饭黄齑","consigneeMobilePhoneNumber":"13741528596","goodsReceiptPlaceDetail":"水电费规划局","identityInfo":null,"creditInfo":null,"businessTypeCode":null,"cargoTypeClassification":"/发过火","cargoTypeClassificationCode":null,"goodsWeightTotal":"10.0","goodsCubeTotal":"10.0","vehicleLength":"儿","vehicleWidth":"听见没","vehicleHeight":"人体内","vehicleTonnage":"规划","vehicleClassification":"0","vehicleClassificationCode":null,"monetaryAmountMin":"11","monetaryAmountMax":"就","planTime":"2018-03-25 13:05:25","planArriveTime":"2018-03-21 13:25:25","lastTime":"2018-03-27 13:25:25","transportStatus":null,"remark":"","createTime":"2018-03-23 10:05:59","progressSituation":"竞价中","accountId":"4c40040449054552bd4486fba77da3f3","updateTime":null,"carrierContractId":null,"totalMonetaryAmount":null,"goodsPublishDetails":null,"sendCar":null},{"id":"297e902362507a0c0162508c62dc0005","placeOfLoading":"河北省张家口市","countrySubdivisionCodeFrom":null,"consignor":"等等","consignorMobilePhoneNumber":"13852634152","placeOfLoadingDetail":"某某公司","goodsReceiptPlace":"河北省秦皇岛市海港区","countrySubdivisionCodeTo":null,"consignee":"邓邓","consigneeMobilePhoneNumber":"13752418965","goodsReceiptPlaceDetail":"某大学","identityInfo":null,"creditInfo":null,"businessTypeCode":null,"cargoTypeClassification":"/电脑","cargoTypeClassificationCode":null,"goodsWeightTotal":"4.0","goodsCubeTotal":"4.0","vehicleLength":"20","vehicleWidth":"2","vehicleHeight":"2","vehicleTonnage":"20000","vehicleClassification":"0","vehicleClassificationCode":null,"monetaryAmountMa40bin":"2000","monetaryAmountMax":"2500","planTime":"2018-03-23 18:45:40","planArriveTime":"2018-03-24 14:50:40","lastTime":"2018-03-24 09:25:40","transportStatus":null,"remark":"00000000000","createTime":"2018-03-23 09:50:00","progressSituation":"竞价中","accountId":"4c40040449054552bd4486fba77da3f3","updateTime":null,"carrierContractId":null,"totalMonetaryAmount":null,"goodsPublishDetails":null,"sendCar":null},{"id":"297e902362507a0c01625083578b0003","placeOfLoading":"河北省衡水市武邑县","countrySubdivisionCodeFrom":null,"consignor":"吸进瓶","consignorMobilePhoneNumber":"15125664785","placeOfLoadingDetail":"长河公司","goodsReceiptPlace":"河北省石家庄市长安区","countrySubdivisionCodeTo":null,"consignee":"嘟嘟","consigneeMobilePhoneNumber":"15315246352","goodsReceiptPlaceDetail":"某大学","identityInfo":null,"creditInfo":null,"businessTypeCode":null,"cargoTypeClassification":"/笔","cargoTypeClassificationCode":null,"goodsWeightTotal":"20.0","goodsCubeTotal":"2.0","vehicleLength":"20","vehicleWidth":"2","vehicleHeight":"2","vehicleTonnage":"20","vehicleClassification":"2","vehicleClassificationCode":null,"monetaryAmountMin":"200","monetaryAmountMax":"250","planTime":"2018-03-24 10:35:59","planArriveTime":"2018-03-25 14:50:59","lastTime":"2018-03-24 10:45:59","transportStatus":null,"remark":"asdfghjkl","createTime":"2018-03-23 09:40:07","progressSituation":"竞价中","accountId":"4c40040449054552bd4486fba77da3f3","updateTime":null,"carrierContractId":null,"totalMonetaryAmount":null,"goodsPublishDetails":null,"sendCar":null},{"id":"297e902362507a0c0162507a0c490000","placeOfLoading":"河北省秦皇岛市海港区","countrySubdivisionCodeFrom":null,"consignor":"阿斯蒂芬","consignorMobilePhoneNumber":"15152415623","placeOfLoadingDetail":"新天地商务中心","goodsReceiptPlace":"河北省衡水市武邑县","countrySubdivisionCodeTo":null,"consignee":"冬耕","consigneeMobilePhoneNumber":"15352634512","goodsReceiptPlaceDetail":"某公司","identityInfo":null,"creditInfo":null,"businessTypeCode":null,"cargoTypeClassification":"/车/床","cargoTypeClassificationCode":null,"goodsWeightTotal":"12010.0","goodsCubeTotal":"1210.0","vehicleLength":"20","vehicleWidth":"5","vehicleHeight":"5","vehicleTonnage":"22","vehicleClassification":"0","vehicleClassificationCode":null,"monetaryAmountMin":"2000","monetaryAmountMax":"200000","planTime":"2018-03-24 09:20:41","planArriveTime":"2018-03-25 09:20:41","lastTime":"2018-03-26 09:25:41","transportStatus":null,"remark":"111111111111111111","createTime":"2018-03-23 09:29:58","progressSituation":"竞价中","accountId":"4c40040449054552bd4486fba77da3f3","updateTime":null,"carrierContractId":null,"totalMonetaryAmount":null,"goodsPublishDetails":null,"sendCar":null},{"id":"28b6673e101f4d21a905f9ae28a9b20a","placeOfLoading":"安徽省/芜湖市/弋江区","countrySubdivisionCodeFrom":null,"consignor":"sdfghj","consignorMobilePhoneNumber":"13714785263","placeOfLoadingDetail":"阿斯蒂芬高","goodsReceiptPlace":"安徽省/芜湖市/弋江区","countrySubdivisionCodeTo":null,"consignee":"qazwsxedc","consigneeMobilePhoneNumber":"13685274196","goodsReceiptPlaceDetail":"巨化股份但是","identityInfo":null,"creditInfo":null,"businessTypeCode":null,"cargoTypeClassification":"而法国23","cargoTypeClassificationCode":null,"goodsWeightTotal":"56.0","goodsCubeTotal":"156.0","vehicleLength":"","vehicleWidth":"","vehicleHeight":"","vehicleTonnage":"","vehicleClassification":"0","vehicleClassificationCode":null,"monetaryAmountMin":"","monetaryAmountMax":"","planTime":"","planArriveTime":"","lastTime":"","transportStatus":null,"remark":"","createTime":"2018-03-05 16:15:37","progressSituation":"竞价中","accountId":"2","updateTime":null,"carrierContractId":null,"totalMonetaryAmount":"4600","goodsPublishDetails":null,"sendCar":null}]};dataobj=data.list; layui.use('laytpl', function(){var laytpl = layui.laytpl;var getTpl = demo.innerHTML;var tpl = laytpl(getTpl);view = document.getElementById('view');tpl.render(dataobj, function(html){view.innerHTML = html;});});</script></html>首先引入layui的css和js文件.script存放的模板是一个div块,可以添加样式.渲染模板中的dataobj必须是全局变量,和上面id为demo的dataobj对应.局部变量模板会找不到dataobj.layUI分页可以和模板引擎结合,第二个div存放分页模块.<div id="view" class="container-fluid"></div><div id="page" class="container-fluid" style="text-align:center;"></div>js代码$(function() {//第一个ajax获取count总数$.ajax({type: "get",url: "/autocarrier/hdGoodsPublish/goodscount",async: true,success: function(data) {console.log(data);layui.use('laypage', function(){var laypage = layui.laypage;//执行一个laypage实例laypage.render({elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号,count: data //数据总数，从服务端得到,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],jump: function(obj, first){//obj包含了当前分页的所有参数，比如：console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。console.log(obj.limit); //得到每页显示的条数//首次不执行if(!first){//do something}//第二个ajax获取当前页请求数据$.ajax({type: "post",url: "/autocarrier/hdGoodsPublish/goodspage",async: true,data:{curr:obj.curr,limit:obj.limit},success: function(list) {console.log(list);dataobj=JSON.parse(list);detail(dataobj);//调用函数}});}});});}});});//被调用函数function detail(dataobj){layui.use('laytpl', function() {var laytpl = layui.laytpl;var getTpl = demo.innerHTML;var tpl = laytpl(getTpl);view = document.getElementById('view');tpl.render(dataobj, function(html){view.innerHTML = html;});});}

layui.use('laypage','laytpl', function(){} 我这样用总是会报错,所以这里分开就好了,第二个ajax得到的数据直接给传递detail()函数.后台就不写了,可以根据上面的代码改一改.附一个sql语句分页查询select * from 表明 WHERE 条件 order by 字段 desc limit a,b;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航