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;

layui分页和模板引擎相关推荐

Layui框架的分页（laypage）和模板引擎（laytpl）的使用
需求:根据数据信息生成数据分页展示. (注:商品的评论列表,分页使用laypage,评论内容区块显示用laytpl) 思路:首先显示时,先请求数据,获取需要显示数据的总条数.在请求数据成功后,首先进行 ...
Layui 数据表格toolbar中使用模板引擎templet，当前系统时间比较问题
在layui数据表格展现中,使用toolbar,由于权限的控制,需要使用templet模板引擎语法进行控制,控制逻辑为只有大于当前时间的记录才能撤销. 效果图如下:(当前时间为2018-06-06) ...
LayUI模板引擎渲染数据
前端模板引擎介绍接上节Spring boot项目开发实战--(LayUI实现前后端数据交换与定义方法渲染数据) 模板引擎能简化开发,极大提高效率,小编之前使用过JSP和Thymeleaf,以及pyt ...
html 开发中遇到的问题，ajax异步传输，layui模板引擎并重新渲染
1.实际中自己遇到的,比较杂乱绑定点击事件绑定enter事件 html A页面跳转到B页面,并传参.取值 layui模板引擎,渲染样式 Ajax 异步传输数据,动态更新内容绑定点击事件 < ...
怎样存储layui模板引擎后台返回的数据，在需要的时候获取
在项目中遇到一个情况,需要动态获取后台的返回数据,并在前台渲染出来,并且能够根据所点击的不同标签,随时获取对应数据.在网上看到两种方法,一种是写一个动态创建div模板的函数,并将返回值作为参数在其中展 ...
《layui宇宙版教程》：模板引擎laytpl
<Layui宇宙版教程>提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入: 1.22 模板引擎laytpl laytpl是JavaScrip ...
element table多选表格_关于layui表格obj.update();无法重渲模板引擎问题
因为框架自身问题:obj.update();不支持:顾只能重新渲染: 表单页面是后台直接返给的:代码中运用了java的字典:变量:等一些列JSP: 我这里的主要问题是:后台需要分开的时间范围:star ...
LayUi 之模板引擎
这个模板引擎说的就是当我们在做项目的过程中,我们有的情况下会发现一个页面不够我们使用,需要跳转页面或者是更改本页面展示的内容,但是我们如果单纯的跳转的话,地址栏会发生改变,我们所需要的东西会展示出来, ...
PHP--认识Smarty模板引擎
用PHP实现MVC开发模式的逻辑层和表示层有多种模板引擎可供选择,但是官方引擎SMARTY诞生后,选择就有了变化.它的理念和实现都是相当"前卫"的.本文主要讨论SMARTY之于其他 ...

layui分页和模板引擎

layui分页和模板引擎相关推荐

最新文章

热门文章