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', width:150}">醫生姓名</th>
      <th lay-data="{field:'t09x00y09x50', width:150}">09:00-09:50</th>
      <th lay-data="{field:'t10x00y10x50', width:150}">10:00-10:50</th>
      <th lay-data="{field:'t11x00y11x50', width:150}">11:00-11:50</th>
      <th lay-data="{field:'t12x00y12x50', width:150}">12:00-12:50</th>
      <th lay-data="{field:'t13x00y13x50', width:150}">13:00-13:50</th>
      <th lay-data="{field:'t14x00y14x50', width:150}">14:00-14:50</th>
      <th lay-data="{field:'t15x00y15x50', width:150}">15:00-15:50</th>
      <th lay-data="{field:'t16x00y16x50', width:150}">16:00-16:50</th>
      <th lay-data="{field:'t17x00y17x50', width:150}">17:00-17:50</th>
      <th lay-data="{field:'t18x00y18x50', width:150}">18:00-18:50</th>
      <th lay-data="{field:'t19x00y19x50', width:150}">19:00-19:50</th>
      <th lay-data="{field:'t20x00y20x50', width:150}">20:00-20:50</th>
      <th lay-data="{field:'t21x00y21x50', width:150}">21:00-21:50</th>
      <th lay-data="{field:'t22x00y22x50', width:150}">22:00-22:50</th>
      <th lay-data="{field:'t23x00y23x50', width: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": "成功"
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM