layui分页和模板引擎

模板引擎

<!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" οnclick="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;



  • 0
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

weixin_41402671

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值