zoukankan      html  css  js  c++  java
  • layui table数据渲染页面+筛选医生+在筛选日期一条龙

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <title>layui在线调试</title>
      <link rel="stylesheet" href="css/layui.all.css" media="all" />
      <style>
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
        .left{
            float: left;
        }
      </style>
    </head>
    <body>
    
    <blockquote class="layui-elem-quote">
    
                    <form class="layui-form">
                            <div class="layui-inline" style="float: right;">
                              <div class="left">
                                <input id="docname"  type="text" placeholder="搜索医生"/>
                              </div>
                              <div class="left" style="padding:0;">
                                    <div id="bb"  class="layui-btn" > 搜索</div>
                    </div>
                            </div>
                   <div style="clear: both;"></div>
                    </form>
    </blockquote>
    
     <blockquote class="layui-elem-quote">
    
                    <form class="layui-form">
                            <div class="layui-inline">
                              <label class="left">选择时间</label>
                              <div class="left">
                                <input type="date" class="layui-input" id="time" placeholder="yyyy-MM-dd">
                              </div>
                              <div class="left" style="padding:0;">
                                    <div id="btn"  class="layui-btn" > 搜索</div>
                    </div>
                            </div>
    
                    </form>
    </blockquote>  
       
    <table class="layui-table" lay-data="{height:332, id:'idTest'}" lay-filter="demo">
      <thead>
        <tr>
          <th lay-data="{field:'usrname', 150}">医生姓名</th>
          <th lay-data="{field:'t09x00y09x50', 150}">09:00-09:50</th>
          <th lay-data="{field:'t10x00y10x50', 150}">10:00-10:50</th>
          <th lay-data="{field:'t11x00y11x50', 150}">11:00-11:50</th>
          <th lay-data="{field:'t12x00y12x50', 150}">12:00-12:50</th>
          <th lay-data="{field:'t13x00y13x50', 150}">13:00-13:50</th>
          <th lay-data="{field:'t14x00y14x50', 150}">14:00-14:50</th>
          <th lay-data="{field:'t15x00y15x50', 150}">15:00-15:50</th>
          <th lay-data="{field:'t16x00y16x50', 150}">16:00-16:50</th>
          <th lay-data="{field:'t17x00y17x50', 150}">17:00-17:50</th>
          <th lay-data="{field:'t18x00y18x50', 150}">18:00-18:50</th>
          <th lay-data="{field:'t19x00y19x50', 150}">19:00-19:50</th>
          <th lay-data="{field:'t20x00y20x50', 150}">20:00-20:50</th>
          <th lay-data="{field:'t21x00y21x50', 150}">21:00-21:50</th>
          <th lay-data="{field:'t22x00y22x50', 150}">22:00-22:50</th>
          <th lay-data="{field:'t23x00y23x50', 150}">23:00-23:50</th>
        </tr>
      </thead>
    </table>
     
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    
    <script src="js/layui.all.js"></script>
    <script>
     var table = layui.table;//表格
     
    function aa(weburl){
           
               table.reload('idTest', {
               page: true,
               method: 'get',
               url:weburl,
               response: {
                  statusName: 'code' //数据状态的字段名称,默认:code
                  ,statusCode: 000 //成功的状态码,默认:0
                  ,msgName: 'message' //状态信息的字段名称,默认:msg
                  ,countType: "data.totalRecord" //数据总数的字段名称,默认:count
                  ,dataType: "data.parameterType" //数据列表的字段名称,默认:data 
                },
                request: {
                  pageName: 'pageNo' //页码的参数名称,默认:page
                  //,limitName: 'pageSize' //每页数据量的参数名,默认:limit
                },
                limits: [10,30,90,150,300]
              ,limit: 1 //默认采用60
            
            });
    };
     aa("http://39.108.53.12:8080/GZ/v2/admin/queryYuYue");
    
    $("#btn").click(function(){
         var time=$("#time").val();
       aa("http://39.108.53.12:8080/GZ/v2/admin/queryYuYue?formdate="+time);
     
    });
    $("#bb").click(function(){
         var docname=$("#docname").val();
       aa("http://39.108.53.12:8080/GZ/v2/admin/queryYuYue?docname="+docname);
     
    });
    
    
    
    
        
    
    
    
    </script>
    </body>
    </html>   
    // 后台返回的数据格式

    {
    "code": "000",
    "data": {
    "parameterType": [
    {
    "t19x00y19x50": "未预约",
    "t09x00y09x50": "未预约",
    "t23x00y23x50": "未预约",
    "t20x00y20x50": "未预约",
    "orderid": "22222",
    "t14x00y14x50": "未预约",
    "t16x00y16x50": "未预约",
    "t15x00y15x50": "未预约",
    "t17x00y17x50": "未预约",
    "t10x00y10x50": "未预约",
    "usrname": "邓医师",
    "t21x00y21x50": "未预约",
    "t11x00y11x50": "未预约",
    "t13x00y13x50": "未预约",
    "t18x00y18x50": "未预约",
    "t12x00y12x50": "未预约",
    "t22x00y22x50": "未预约"
    },
    {
    "t10x00y10x50": "已预约",
    "usrname": "黄大夫",
    "t11x00y11x50": "已预约",
    "orderid": "22222",
    "t14x00y14x50": "已预约"
    },
    {
    "t19x00y19x50": "未预约",
    "t09x00y09x50": "未预约",
    "t23x00y23x50": "未预约",
    "t20x00y20x50": "未预约",
    "orderid": "22222",
    "t14x00y14x50": "未预约",
    "t16x00y16x50": "未预约",
    "t15x00y15x50": "未预约",
    "t17x00y17x50": "未预约",
    "t10x00y10x50": "未预约",
    "usrname": "鹿晗",
    "t21x00y21x50": "未预约",
    "t11x00y11x50": "已预约",
    "t13x00y13x50": "未预约",
    "t12x00y12x50": "未预约",
    "t18x00y18x50": "未预约",
    "t22x00y22x50": "未预约"
    },
    {
    "t19x00y19x50": "已预约",
    "t09x00y09x50": "已预约",
    "t23x00y23x50": "已预约",
    "t20x00y20x50": "已预约",
    "orderid": "22222",
    "t16x00y16x50": "已预约",
    "t15x00y15x50": "已预约",
    "t14x00y14x50": "已预约",
    "t17x00y17x50": "已预约",
    "t10x00y10x50": "已预约",
    "t21x00y21x50": "已预约",
    "usrname": "王大夫",
    "t11x00y11x50": "已预约",
    "t13x00y13x50": "已预约",
    "t12x00y12x50": "已预约",
    "t18x00y18x50": "已预约",
    "t22x00y22x50": "已预约"
    },
    {
    "t19x00y19x50": "已预约",
    "t09x00y09x50": "已预约",
    "t23x00y23x50": "已预约",
    "t20x00y20x50": "已预约",
    "orderid": "22222",
    "t15x00y15x50": "已预约",
    "t14x00y14x50": "已预约",
    "t16x00y16x50": "已预约",
    "t17x00y17x50": "已预约",
    "t10x00y10x50": "已预约",
    "usrname": "吴亦凡",
    "t21x00y21x50": "已预约",
    "t11x00y11x50": "已预约",
    "t13x00y13x50": "已预约",
    "t12x00y12x50": "已预约",
    "t18x00y18x50": "已预约",
    "t22x00y22x50": "已预约"
    }
    ],
    "pageNo": 1,
    "totalPage": 1,
    "pageSize": 15,
    "totalRecord": 5
    },
    "message": "成功"
    }

  • 相关阅读:
    Linux-文件目录管理
    20. 有效的括号
    242. 有效的字母异位词
    387. 字符串中的第一个唯一字符
    136. 只出现一次的数字
    14. 最长公共前缀
    268. 丢失的数字
    169. 多数元素
    26. 删除有序数组中的重复项
    283. 移动零
  • 原文地址:https://www.cnblogs.com/hjptopshow/p/7765302.html
Copyright © 2011-2022 走看看