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

Posted 2021-02-08 EJLL

建立动态表格，使用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;
             }

               }
    });}