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="搜索医生" οnkeyup="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" name="dateShow" 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:510, id:'idTest'}" lay-filter="demo"><thead><tr><th lay-data="{field:'usrname', width:110,fixed: true}">医生姓名</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; //表格var date = new Date();var year = date.getFullYear();var month = date.getMonth()+1;var day = date.getDate();var today = year + "-" + (month<10?"0"+month:month) + "-" +(day<10?"0"+day:day);$('#time').val(today);function GetAppointmentData(paramTime, paramDocName) {//var today = new Date(); var weburl = "https://tsch.fromfuture.cn:7712/GZ/v2/admin/queryYuYue?1=1";//var weburl = 'http://172.16.9.75:8080/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: 10 //默认采用60
                });};GetAppointmentData(today,'');//页面加载初始化数据，调用此方法，传空值
$("#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": "成功"
}

转载于:https://www.cnblogs.com/hjptopshow/p/7770709.html

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

layui table数据表格中数据返回成功，但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
jQuery的ajax获取数据渲染页面
一.ajax的请求方式 post $.ajax({//请求方式type:'POST',//发送请求的地址url:'xxxxxx',//服务器返回的数据类型dataType:'json',//发送到服务 ...
layui table数据表格前端分页
下面js代码是在前端进行分页,主要是利用表格插件的parseData参数,该参数触发是在请求数据回来后,但还未显示在表中时触发的. layui.use('table', function(){var ...
Layui table数据重载实现
类似局部刷新数据,常用与搜索框的使用,刷新查找的数据官方文档参考运行效果参考: 数据表格的重载 HTML <div class="form-box"><div ...
vue数据渲染页面数据展示出现闪烁问题
在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"><p>{{value.name}}</p> &l ...
layui Table数据表格序号自动增长
一般显示给用户的界面直观就好,像数据的真实id是不应该让用户看到,不合适也不安全,所以一般可以再生成一个自增序列号: 需要使用layui模板引擎: <script type="tex ...
layui table数据修改的回显
实现的样式给你们看一波点击这锅按钮其实回显就是一个赋值的操作,先把form表单的那些input 框的id拿到,在展示成功的那里进行绑值 table.on('tool(test)', functio ...
layui数据表格解析html,layui框架table 数据表格的方法级渲染详解
layui框架table 数据表格的方法级渲染详解如下所示: //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {ch ...
layui table 分页功能实现
今天看自己写的用layui table实现的页面效果,内容太多了,突发奇想加个分页,在百度里找了很多种方法,都不好用,可怎么也不想放弃,就一直找啊,尝试啊,无意间发现了一种简单好用的办法,完美的实现了 ...

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

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

最新文章

热门文章