首页 > Web开发 > 详细

查询表格——建立动态表格,使用ajax输入查询条件将后台数据查询出来以表格的形式展示出来

时间:2019-02-12 15:54:04      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:back   val   led   14.   bmi   照片   lock   get   doc   

建立动态表格,使用ajax将前台查询条件传给后台,并将查询结果以表格的形式展示出来。

页面的展示效果如下图所示:

技术分享图片

第一步:查询条件的部分:

代码如下:

<div class="text-c">
<span style="text-indent: 2em;display: inline-block;font-size:20px">账号:</span>
<input type="text" name="telephone" id="telephone" placeholder=" 装维人员工号" style="width:120px" class="input-text">
</br>
<span style="font-size: 20px">开始日期:</span>
<input type="text" onfocus="WdatePicker({ maxDate:‘#F{$dp.$D(\‘startTime\‘)||\‘%y-%M-%d\‘}‘ })" id="startTime" name="startTime" class="input-text Wdate" style="width:120px;">
</br><span style="font-size: 20px">截止日期:</span>
<input type="text" onfocus="WdatePicker({ minDate:‘#F{$dp.$D(\‘endTime\‘)}‘,maxDate:‘%y-%M-%d‘ })" id="endTime" name="endTime" class="input-text Wdate" style="width:120px;">
</br><span style="font-size: 20px">分纤箱号:</span>
<input type="text" name="fiberopticnumber" id="" placeholder=" 分纤箱号" style="width:120px" class="input-text"><br><br>
//点击查询按钮的时候调用search()函数

<button name="" class="btn btn-success" type="submit" style="height: 40px;" onclick="search()"><i class="Hui-iconfont">&#xe665;</i> <span style="font-size: 20px">查询</span></button>
<button name="" class="btn btn-success" type="submit" style="height: 40px;" onclick="window.location.reload()"><i class="Hui-iconfont">&#xe665;</i> <span style="font-size: 20px">重置</span></button>

</div>

第二步:首先建立动态表格的表头,表头信息固定。

代码如下:由于表头的信息较多,只显示一些主要的信息,其他的信息都隐藏。

<table class="table table-bordered table-striped text-center" id=‘table‘>
<thead>
<tr>
<th style="display: none">客户名</th>
<th style="display: none">电话</th>
<th>装维人员</th>
<th>县区</th>
<th style="display: none">支局类型</th>
<th style="display: none">支局类型</th>
<th style="display: none">录入时间</th>
<th style="display: none">详细地址</th>
<th>分纤箱号</th>
<th style="display: none">分纤箱位置图片</th>
<th style="display: none">大门照片</th>
<th style="display: none">居住照片</th>
<th style="display: none">宽带供应商</th>
<th style="display: none">协议到期时间</th>
<th>详情</th>
</tr>
</thead>
</table>
第三步:使用ajax将前台查询条件传送到后台,并将查询结果传送到前台。
代码如下:
function search(){
$.ajax({
type:‘Post‘,
url:"FtpAction_listUserQuery",
data:{
telephone:$(‘#telephone‘).val(),//获取到查询条件中电话号码的内容
startTime:$(‘#startTime‘).val(),//获取到查询条件中的开始时间的内容
endTime:$(‘#endTime‘).val(),//获取到查询条件中的结束时间的内容
fiberopticnumber:$(‘#fiberopticnumber‘).val()//获取到查询条件中分纤箱号的内容,并将查询条件传送给后台
},
dataType:‘json‘,
success:function (data) {
if(data!=null){
var table = document.getElementById("table");
//建立动态表格,字段id号应和数据库中的字段一致,并且只显示表头字段显示的内容,其他的字段信息隐藏显示。
var rows=table.rows.length;
for(var i=0;i<data.length;i++) {
var row = table.insertRow(table.rows.length);
var c1 = row.insertCell(0);
c1.innerHTML = data[i].id;
c1.style.display=‘none‘;
var c2 = row.insertCell(1);
c2.innerHTML = data[i].customer;
c2.style.display=‘none‘;
var c3 = row.insertCell(2);
c3.innerHTML = data[i].phonenumber;
c3.style.display=‘none‘;
var c4 = row.insertCell(3);
c4.innerHTML = data[i].username;
var c5 = row.insertCell(4);
c5.innerHTML = data[i].couties;
var c6 = row.insertCell(5);
c6.innerHTML = data[i].subtype;
c6.style.display=‘none‘;
var c7 = row.insertCell(6);
c7.innerHTML = data[i].subname;
c7.style.display=‘none‘;

//将录入时间对象中的参数穿进来
var c8 = row.insertCell(7);
c8.innerHTML = data[i].dateString;
c8.style.display=‘none‘;
var c9 = row.insertCell(8);
c9.innerHTML = data[i].detailedaddress;
c9.style.display=‘none‘;
var c10 = row.insertCell(9);
c10.innerHTML = data[i].fiberopticnumber;
var c11 = row.insertCell(10);
c11.innerHTML = data[i].fenqianlocation;
c11.style.display=‘none‘;
var c12 = row.insertCell(11);
c12.innerHTML = data[i].door;
c12.style.display=‘none‘;
var c13 = row.insertCell(12);
c13.innerHTML = data[i].live;
c13.style.display=‘none‘;
var c14 = row.insertCell(13);
c14.innerHTML = data[i].provider;
c14.style.display=‘none‘;
var c15 = row.insertCell(14);
c15.innerHTML = data[i].expire;
c15.style.display=‘none‘;
//插入详情按钮,当点击详情按钮的时候,以弹框的内容将所有隐藏信息显示出来。
var c16 = row.insertCell(15);
c16.innerHTML = ‘<button class="btn btn-link" onclick="$(\‘#w\‘).window(\‘open\‘); modify(this) ">详情</button>‘;
}
}else{
alert("没有找到符合此条件的信息或者输入错误!");
return false;
}

}
});}

 

查询表格——建立动态表格,使用ajax输入查询条件将后台数据查询出来以表格的形式展示出来

标签:back   val   led   14.   bmi   照片   lock   get   doc   

原文:https://www.cnblogs.com/ejll/p/10365438.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号