• 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=" 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": "成功"
    }

  • 相关阅读:
    cp备份操作时如何忽略指定的目录
    Wordpress“固定链接”页面出现404原因及解决方法
    CentOS7上搭建WEB服务器
    坑爹的云服务安全组
    java spring hibernate
    电脑性能
    android subclipse subversive
    android 开发 程序中下载安装APK文件 问题汇总 解析程序包时出现问题
    android sqlite datetime demo
    android SurfaceView中播放视频 按视频的原始比例播放
  • 原文地址:https://www.cnblogs.com/hjptopshow/p/7453113.html
Copyright © 2020-2023  润新知