模板引擎
<!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,"monetaryAmountMin":"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;