layui table数据渲染页面+筛选医生+在筛选日期一条龙2

<!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>预约管理</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;
            }

            #bb {
                margin-left: 15px;
            }

            .layui-table-cell {
                text-align: center;
            }
        </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" class="layui-input" type="text" placeholder="搜索医生" onkeyup="this.value=this.value.replace(/\s+/g,‘‘)" />
                    </div>
                    <div class="left" style="padding:0;margin-left:10px;">
                        <div id="searchId" class="layui-btn"> 搜索</div>
                    </div>
                </div>
                <div class="layui-inline">
                    <!--<label class="left">选择时间</label>-->
                    <div class="left" style="margin-right: 15px;">
                        <input type="date" class="layui-input" id="time" placeholder="选择时间">
                    </div>
                    <div class="left" style="padding:0;">
                        <!--<div id="btn"  class="layui-btn" > 搜索</div>-->
                    </div>
                </div>
            </form>
        </blockquote>

        <!--<blockquote class="layui-elem-quote">
                <form class="layui-form">
                </form>
        </blockquote>  -->

        <table class="layui-table" lay-data="{height:332, id:‘idTest‘}" lay-filter="demo">
            <thead>
                <tr>
                    <th lay-data="{field:‘usrname‘, width:110}">医生姓名</th>
                    <th lay-data="{field:‘t09x00y09x50‘, width:110}">09:00-09:50</th>
                    <th lay-data="{field:‘t10x00y10x50‘, width:110}">10:00-10:50</th>
                    <th lay-data="{field:‘t11x00y11x50‘, width:110}">11:00-11:50</th>
                    <th lay-data="{field:‘t12x00y12x50‘, width:110}">12:00-12:50</th>
                    <th lay-data="{field:‘t13x00y13x50‘, width:110}">13:00-13:50</th>
                    <th lay-data="{field:‘t14x00y14x50‘, width:110}">14:00-14:50</th>
                    <th lay-data="{field:‘t15x00y15x50‘, width:110}">15:00-15:50</th>
                    <th lay-data="{field:‘t16x00y16x50‘, width:110}">16:00-16:50</th>
                    <th lay-data="{field:‘t17x00y17x50‘, width:110}">17:00-17:50</th>
                    <th lay-data="{field:‘t18x00y18x50‘, width:110}">18:00-18:50</th>
                    <th lay-data="{field:‘t19x00y19x50‘, width:110}">19:00-19:50</th>
                    <th lay-data="{field:‘t20x00y20x50‘, width:110}">20:00-20:50</th>
                    <th lay-data="{field:‘t21x00y21x50‘, width:110}">21:00-21:50</th>
                    <th lay-data="{field:‘t22x00y22x50‘, width:110}">22:00-22:50</th>
                    <th lay-data="{field:‘t23x00y23x50‘, width:110}">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 GetAppointmentData(paramTime, paramDocName) {

                var weburl = "http://39.108.53.12:8080/GZ/v2/admin/queryYuYue?1=1";

                if(paramTime != ‘‘) {
                    weburl += ‘&formdate=‘ + paramTime;
                }
                if(paramDocName != ‘‘) {
                    weburl += ‘&docname=‘ + paramDocName;
                }

                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
                });
            };

            GetAppointmentData(‘‘,‘‘);//页面加载初始化数据，调用此方法，传空值

            $("#searchId").click(function() {

                var time = $("#time").val();
                var docname = $("#docname").val();

                GetAppointmentData(time.trim(), docname.trim());//调用方法

            });

        </script>
    </body>

</html>

json

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

时间： 2024-11-08 21:04:52

layui table数据渲染页面+筛选医生+在筛选日期一条龙2的相关文章

分页插件，屏幕滚动ajax加载数据渲染页面

<link rel="stylesheet" href="yunsuifang/pc-patients/css/dropload.css" />    <style>       .opacity {            webkit-animation: opacity 0.3s linear;            animation: opacity 0.3s linear;        } @-webkit-keyframes o

layui table表格字段过长，展示不完整时，鼠标放到上面展示完整信息

1.首先每个列都有一个title,里面放入完整信息,然后写一个如下的function, 1 2 3 4 5 6 7 8 function tdTitle(){     $('th').each(function(index,element){         $(element).attr('title',$(element).text());     });     $('td').each(function(index,element){         $(element).attr('t

layui table 渲染完成后，怎样拿到表个里的所有数据

var url = layui.table.cache.test[index]["url"]; $("#show_pic").attr("src", url); 其中 test 是 table 的 id 原文地址:https://www.cnblogs.com/mentiantian/p/10218074.html

将JSOn数据渲染进页面表格（一）

实现:将后台JSOn数据在页面以表格显示最后n条,折叠前面的内容. 除了处理JSOn数据比较麻烦,原理还是DOM操作,所以原生基础很重要啊.这种情况是在页面写好表头,然后再插入行,筛选. JSOn数据格式,差不多这个格式吧,随便写的 [ {"version":"1.2.1", "333":"44", "fruit":[ {"apple":"one"}, {"

使用LayUI展示数据

LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 点击查看 文档地址 下载框架 使用: 1.把这个5个文件项都拷贝到项目中 2.到layui官网 地址 将后台布局的代码考过来,做一个左侧导航,右侧显示主内容的格局 3.代码复制到我们自己项目新建的home.html页面后, 根据代码上的提示,将远程地址替换成本地,直接删除css引用和js引用,从自己的项目中将这2个文件拖到html页面上 4.完成左侧菜单跳转右侧显示 点击

layui table 跨页记忆选择

layui 表格功能目前默认不支持跨页记忆选择 下面来实现layui table跨页记忆选择实现 基于layui版本 1.4.5 表格跨页通用方法 //表格分页复选框 layui.define(['jquery', 'table'], function (exports) { var $ = layui.jquery , table = layui.table; //记录选中表格记录编号http://www.1994july.club/seo/?p=2797 var checkedList =

angularjs学习笔记--$http、数据渲染到表格、路由、依赖注入、provider

1—$http 可以从服务器中获取更大的数据集,这里使用angularjs的内置服务称为$http.使用angularjs的依赖注入为phoneList组件的控制器提供服务. 在我们的控制器中使用angularjs的$http服务,向我们的web服务器发出http请求,以获取文件中的数据. app/phone-list/phone-list.component1.js: angular.module('phoneList').component('phoneList',{ templateUrl

layui table 列宽百分比显示

var layer = layui.layer, form = layui.form, table = layui.table; var $ = layui.$; /*select gysmc,zyzw ,xm ,sjhm ,bgshm ,emilyx , zgsrgzwsj ,zggsgl ,cast(gysxxid as int) as gysxxid, pc, gysryxxMdataID as ID,sjbs from gysryxxMdata*/ var tableInit = tab

浏览器渲染页面过程

一.浏览器加载和渲染html的顺序 1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)3.如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载.4.并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载.阻塞加载5.样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲