layui渲染页面加分页做法(ajax请求后台数据哟)

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>就诊记录</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/btable.css" />
<link rel="stylesheet" href="css/global.css" media="all">

</head>
<style>
.oy-tablehead{
background-color:#538ED5 ;
font-size: 20px;
color: white;
text-align: center;
font-weight: 800;
line-height:50px;
}
</style>
<body style=" background-color: gainsboro;">
<div style="margin:0px; background-color: white; margin:0 10px;">
<div class="oy-tablehead">就诊记录</div>
<table class="site-table table-hover">
<thead>
<tr>
<th>医生头像</th>
<th>医生姓名</th>
<th>问诊时间</th>
<th>历史病例</th>
</tr>
</thead>
<!--内容容器-->
<tbody id="con">

</tbody>
</table>
<!--分页容器-->
<div id="paged" style="text-align: center;"></div>

</div>
<!--模板-->
<script type="text/html" id="conTemp">
{{# layui.each(d.list, function(index, item){ }}
<tr>

<td>
<img src="http://106.14.139.5:7014/GZ/images/getimages?guid={{ item.sicguid }}" alt="" id="userimg" style="width: 100px;height: 100px;"/>
</td>
<td>{{ item.crtusr }}</td>
<td>{{ item.crtdat }}</td>
<td>
<a href="javascript:void(0)" value="{{ item.guid }}" class="layui-btn layui-btn-mini layui-btn-normal caseguid">查看病例</a>
</td>
</tr>
{{# }); }}
</script>
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script>
layui.config({
base: 'js/'
}).use(['paging'], function() {
var $ = layui.jquery,
paging = layui.paging();

paging.init({
openWait: true,
url: 'http://106.14.139.5:7014/GZ/dtdocsfconroom/getmedicalrecordslist?&usrguid=174BD3D5879C3BF0E050007F010077DC', //地址
elem: '#con', //内容容器
type:'post',
params: { //发送到服务端的参数
//t: Math.random(),
//token:'F8F5AE2137BFAEF77FF7408476AF6C64',
//pageIndex: 1
},
tempElem: '#conTemp', //模块容器
pageConfig: { //分页参数配置
elem: '#paged', //分页容器
pageSize: 10 ,//分页大小
pageNo:1
},
success: function() { //渲染成功的回调
//alert('渲染成功');
$('.caseguid').click(function(){
var guid = $(this).attr('value');
//alert(guid);
window.open("https://sch.xmidware.com/chis/ROOT_CHIS/L.sp?grdid=CHIS_Eight&guid="+guid);
})

},
fail: function(msg) { //获取数据失败的回调
//alert('获取数据失败')
},
complate: function(res) { //完成的回调
//alert('处理完成');
console.log(res);
},
});
});


</script>

</body>

</html>

 

这是接口里面的后台数据哟~

{
"code": "000",
"data": {
"parameterType": [
{
"crtusr": "undefined",
"guid": "57E4051F3A3874E9E050007F01002230",
"sicguid": "undefined",
"docguid": "74BD3D5879C3BF0E050007F010077DC",
"crtdat": "2017-08-29 19:50:38"
},
{
"crtusr": "大医生",
"guid": "57F0DE96E909B78BE050007F01003F2E",
"sicguid": "1E469394C8D5B7B0E050007F01005770",
"docguid": "230E20A6FFA1B41CE050AE0AC684959F",
"crtdat": "2017-08-30 11:10:26"
},
{
"crtusr": "undefined",
"guid": "57F0DE96E90AB78BE050007F01003F2E",
"sicguid": "undefined",
"docguid": "74BD3D5879C3BF0E050007F010077DC",
"crtdat": "2017-08-30 13:41:56"
},
{
"crtusr": "undefined",
"guid": "57F0DE96E90BB78BE050007F01003F2E",
"sicguid": "undefined",
"docguid": "74BD3D5879C3BF0E050007F010077DC",
"crtdat": "2017-08-30 13:49:17"
},
{
"crtusr": "null",
"guid": "578FF173D0B5BEC4E050007F0100480B",
"sicguid": "1E469394C8D5B7B0E050007F01005770",
"docguid": "230E20A6FFA1B41CE050AE0AC684959F",
"crtdat": "2017-08-25 15:32:11"
},
{
"crtusr": "undefined",
"guid": "57F3057BF8A73882E050007F01003F40",
"sicguid": "undefined",
"docguid": "74BD3D5879C3BF0E050007F010077DC",
"crtdat": "2017-08-30 13:44:29"
},
{
"crtusr": "null",
"guid": "57DC6C94135E2DB2E050007F010050E5",
"sicguid": "1E469394C8D5B7B0E050007F01005770",
"docguid": "230E20A6FFA1B41CE050AE0AC684959F",
"crtdat": "2017-08-29 10:46:54"
},
{
"crtusr": "null",
"guid": "57F02FCA95A92F3CE050007F010038B2",
"sicguid": "1E469394C8D5B7B0E050007F01005770",
"docguid": "230E20A6FFA1B41CE050AE0AC684959F",
"crtdat": "2017-08-30 10:21:34"
},
{
"crtusr": "小医生",
"guid": "57F0D83F8F875A03E050007F01003F32",
"sicguid": "1E469394C8D5B7B0E050007F01005770",
"docguid": "230E20A6FFA1B41CE050AE0AC684959F",
"crtdat": "2017-08-30 11:08:40"
},
{
"crtusr": "大医生",
"guid": "57F0D83F8F885A03E050007F01003F32",
"sicguid": "1E469394C8D5B7B0E050007F01005770",
"docguid": "230E20A6FFA1B41CE050AE0AC684959F",
"crtdat": "2017-08-30 11:09:08"
},
{
"crtusr": "undefined",
"guid": "57F0D83F8F895A03E050007F01003F32",
"sicguid": "undefined",
"docguid": "74BD3D5879C3BF0E050007F010077DC",
"crtdat": "2017-08-30 14:44:15"
},
{
"crtusr": "邓医生",
"guid": "57DC179A6C64CBC2E050007F01004C9B",
"sicguid": "1E469394C8D5B7B0E050007F01005770",
"docguid": "230E20A6FFA1B41CE050AE0AC684959F",
"crtdat": "2017-08-29 10:23:04"
},
{
"crtusr": "邓医生",
"guid": "57DC179A6C65CBC2E050007F01004C9B",
"sicguid": "1E469394C8D5B7B0E050007F01005770",
"docguid": "230E20A6FFA1B41CE050AE0AC684959F",
"crtdat": "2017-08-29 10:23:04"
},
{
"crtusr": "邓医生",
"guid": "57DC179A6C66CBC2E050007F01004C9B",
"sicguid": "1E469394C8D5B7B0E050007F01005770",
"docguid": "230E20A6FFA1B41CE050AE0AC684959F",
"crtdat": "2017-08-29 10:23:54"
},
{
"crtusr": "邓医生",
"guid": "57DC179A6C67CBC2E050007F01004C9B",
"sicguid": "1E469394C8D5B7B0E050007F01005770",
"docguid": "230E20A6FFA1B41CE050AE0AC684959F",
"crtdat": "2017-08-29 10:23:54"
}
],
"pageNo": 1,
"totalPage": 2,
"pageSize": 15,
"totalRecord": 24
},
"message": "成功"
}

posted on 2017-08-30 14:51  今天的代码你撸了嘛  阅读(2440)  评论(0)  编辑  收藏  举报

导航