ajax异步获取数据后动态向表格中添加数据的页面

因为某些原因，项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面，网上找了半天都没有看到现成的，决定自己写个例子

1、HTML页面

[html] view plaincopyprint?

<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>xx信息查询</title>
<script type=“text/javascript” src=“/js/jquery-1.11.3.min.js”></script>
<script type=“text/javascript” src=“/js/ai/ai-lib.js”></script>
<script src=“/js/cheat-order.js”></script>
</head>
<body>
<div class=“main pusher”>
<form class=“ui form vertical segment form-search”>
<div class=“fields”>
<div class=“halfsixCl wide field js_query_date”>
<label for=“checkDate”>预定截止日期</label>
<input name=“checkDate” type=“text” id=“checkDate”>
</div>
<div class=“sixCl wide field”>
<label>SEQ</label>
<input name=“hotelSeq” id=“hotelSeq” placeholder=“” type=“text”>
</div>
<div class=“sixCl wide field js_query_seq”>
<label>订单号</label>
<input type=“text” maxlength=“50” name=“orderNo” id=“orderNo” placeholder=“”>
</div>
<div class=“sixCl wide field js_query_btype”>
<label>排序字段</label>
<select name=“sortFiled” id=“sortFiled”>
<option value=“hotel_seq”>酒店seq</option>
<option value=“order_no”>订单号</option>
<option value=“cellid”>cellid</option>
</select>
</div>
<div>
<label></label>
<input type=“button” value=“搜索” id=“btSearch” class=“ui right floated positive button btn-search”/>
</div>
</div>
</form>
<div class=“table-container”>
<table class=“ui nine column table celled table-result” id=“table-result”>
<thead>
<tr>
<th>hotelSeq</th>
<th>酒店名称</th>
<th>订单号</th>
<th>联系人手机号</th>
<th>预定时间</th>
<th>userId</th>
<th>cellid</th>
<th>gps定位城市</th>
<th>wifi定位城市</th>
<th>定位距离</th>
</tr>
</thead>
<tbody id=“tbody-result”>
</tbody>
</table>
</div>
</div>
</body>
</html>

<!doctype html>
<html>
<head><meta charset="utf-8"><title>xx信息查询</title><script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script><script type="text/javascript" src="/js/ai/ai-lib.js"></script><script src="/js/cheat-order.js"></script>
</head><body>
<div class="main pusher"><form class="ui form vertical segment form-search"><div class="fields"><div class="halfsixCl wide field js_query_date"><label for="checkDate">预定截止日期</label><input name="checkDate" type="text" id="checkDate"></div><div class="sixCl wide field"><label>SEQ</label><input name="hotelSeq" id="hotelSeq" placeholder="" type="text"></div><div class="sixCl wide field js_query_seq"><label>订单号</label><input type="text" maxlength="50" name="orderNo" id="orderNo" placeholder=""></div><div class="sixCl wide field js_query_btype"><label>排序字段</label><select name="sortFiled" id="sortFiled"><option value="hotel_seq">酒店seq</option><option value="order_no">订单号</option><option value="cellid">cellid</option></select></div><div><label></label><input type="button" value="搜索" id="btSearch" class="ui right floated positive button btn-search"/></div></div></form><div class="table-container"><table class="ui nine column table celled table-result" id="table-result"><thead><tr><th>hotelSeq</th><th>酒店名称</th><th>订单号</th><th>联系人手机号</th><th>预定时间</th><th>userId</th><th>cellid</th><th>gps定位城市</th><th>wifi定位城市</th><th>定位距离</th></tr></thead><tbody id="tbody-result"></tbody></table></div>
</div>
</body>
</html>

2、cheat-order.js

[javascript] view plaincopyprint?

$$(’#btSearch’).click(function () {
var checkDate = $(‘#checkDate’).val();
var orderNo = $(‘#orderNo’).val();
var sortFiled = $(‘#sortFiled’).val();
var hotelSeq = $(‘#hotelSeq’).val();
var tbody=window.document.getElementById(“tbody-result”);
$.ajax({
type: ”post”,
dataType: ”json”,
url: ”ac/order/queryCheatOrder”,
data: {
hotelSeq: hotelSeq,
orderNo: orderNo,
sortFiled: sortFiled,
checkDate: checkDate
},
success: function (msg) {
if (msg.ret) {
var str = “”;
var data = msg.data;
for (i in data) {
str += ”<tr>” +
”<td>” + data[i].hotel_seq + “</td>” +
”<td>” + data[i].hotel_name + “</td>” +
”<td>” + data[i].order_no + “</td>” +
”<td>” + data[i].user_phone + “</td>” +
”<td>” + data[i].create_time + “</td>” +
”<td>” + data[i].user_id + “</td>” +
”<td>” + data[i].cellid + “</td>” +
”<td>” + data[i].gps_city + “</td>” +
”<td>” + data[i].cell_city + “</td>” +
”<td>” + data[i].distance + “</td>” +
”</tr>”;
}
tbody.innerHTML = str;
}
},
error: function () {
alert(”查询失败”)
}
});
});
});

$(function () {$('#btSearch').click(function () {var checkDate = $('#checkDate').val();var orderNo = $('#orderNo').val();var sortFiled = $('#sortFiled').val();var hotelSeq = $('#hotelSeq').val();var tbody=window.document.getElementById("tbody-result");$.ajax({type: "post",dataType: "json",url: "ac/order/queryCheatOrder",data: {hotelSeq: hotelSeq,orderNo: orderNo,sortFiled: sortFiled,checkDate: checkDate},success: function (msg) {if (msg.ret) {var str = "";var data = msg.data;for (i in data) {str += "<tr>" +"<td>" + data[i].hotel_seq + "</td>" +"<td>" + data[i].hotel_name + "</td>" +"<td>" + data[i].order_no + "</td>" +"<td>" + data[i].user_phone + "</td>" +"<td>" + data[i].create_time + "</td>" +"<td>" + data[i].user_id + "</td>" +"<td>" + data[i].cellid + "</td>" +"<td>" + data[i].gps_city + "</td>" +"<td>" + data[i].cell_city + "</td>" +"<td>" + data[i].distance + "</td>" +"</tr>";}tbody.innerHTML = str;}},error: function () {alert("查询失败")}});});
});

3、示例图

备注：css已经删除了，效果比上面示例图要差些

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明

ajax异步获取数据后动态向表格中添加数据的页面相关推荐

ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...
java搜索excel表格里的数据_Java读取Excel表格中的数据
前言本文主要讲述如何在Java中读取Excel表中的数据并在控制台输出,实现工具为Eclipse 提示:以下是本篇文章正文内容,下面案例可供参考一.添加jar包文件描述:在Java中导入导出Ex ...
vue校验表格数据_如何通过数据验证限制Google表格中的数据
vue校验表格数据 If you use Google Sheets to collaborate with others, you can prevent people from typing th ...
matlab筛选excel数据统计,#excel筛选数据#如何用excel表格中的数据制图
如何将excel中的部分数据做成图表数据透视表岂不更简单??? Excel表格作图中X轴的刻度怎么设置? 图表当中的X轴刻度也就是横坐(在2003版本里面叫分类轴)的刻度. 选图表X轴--右键--设 ...
POI：从Excel文件中读取数据，向Excel文件中写入数据，将Excel表格中的数据插入数据库，将数据库中的数据添加到Excel表
POI 简介: POI是Apache软件基金会用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程序对Microsoft Office格式档案读和写的功能. ...
txt中的数据导入matlab中画图,excel怎样导入表格数据-如何将excel表格中大量数据导入matlab中并作图...
Excel中如何将另一表格中的数据对应导入 1开表格,在上方功能栏点击据". 2.点入数据. 3.点击数据来源. 4择想要的导入的数据文件,就好了. 如何将TXT文档中的数据直接导入到Exc ...
python3读取excel数据-python3 读取Excel表格中的数据
需要先安装openpyxl库通过pip命令安装: pip install openpyxl 源码如下: #!/usr/bin/python3 #-*- coding:utf-8 -*- import ...
vue从后台获取新数据后刷新_vue项目中实现定时刷新页面（重新渲染数据实时更新）...
需求: 每隔一分钟自动刷新一下当前页面,同时发送请求,重新渲染数据,以到达实时更新. 开始: js有两种定时器 setInterval(function(){}, milliseconds)--会不停 ...
将数据追加到html 表格中,将数据添加到数据表中
将数据添加到数据表中 03/30/2017 本文内容在创建 DataTable 并使用列和约束定义其结构之后,您可以将新的数据行添加到表中. 要添加新行,可将一个新变量声明为 DataRow 类型. ...

ajax异步获取数据后动态向表格中添加数据的页面

ajax异步获取数据后动态向表格中添加数据的页面相关推荐

最新文章

热门文章