jquery - ColdFusion,JQuery在div中显示表格
问题描述
当用户输入客户代码时,我试图在我的页面上显示一个数据表表 - 传递参数并且查询返回正确的数据,但是当返回数据时,它位于标准表中,并且没有按应有的格式设置。以下是我的页面代码: index page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Company - Shipping Details</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--->
<!-- First include jquery js -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Then include bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/ec970e4b9e.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="selectRegions.js"></script>
</head>
<body>
<div class="page-header">
<div class="bs-header-margin">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<a href="index.cfm"><img class="img-responsive" src="images/Company_logo.jpg" alt="Company Logo" ></a>
</div>
</div>
</div>
<!---<span class='LogoutLink btn btn-default'>LOGOUT</span> --->
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h1>Shipping Details</h1>
</div>
</div>
</div>
<div>
<cfoutput>
<body>
<div class="container-fluid">
<form>
<div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="usr">Enter the Customer Code to return all the shipments for the past 45 days: </label>
<input type="text" class="form-control" id="usr" onChange="showRegions(this.value)">
</div>
</div>
</div>
<div id="regionList">
</div>
</form>
</div>
</body>
</cfoutput>
</div>
<footer>
</footer>
</html>
数据页
<cfquery name="getRegions" datasource="EpicorDatasource">
SELECT
C.CustID, C.Name,
SH.PackNum,
SH.OTSOrderNum as 'OrderNumber',
SH.ShipDate,
SH.ShipStatus,
SD.PackLine,
SD.PartNum,
SD.LineDesc,
SD.ShipCmpl,
SD.SellingInventoryShipQty as 'ShipQty'
FROM
ShipDtl SD
LEFT JOIN ShipHead SH
ON SD.Company = SH.Company AND SD.PackNum = SH.PackNum
LEFT JOIN Customer C
ON SH.Company = C.Company AND SH.CustNum = C.CustNum
WHERE
(SH.ShipDate>GetDate()-45)
AND (SD.Company='AGR001')
AND (C.CustID = <cfqueryparam value = "#url.custCode#" cfsqltype="cf_sql_varchar">)
</cfquery>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- First include jquery js -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Then include bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://use.fontawesome.com/ec970e4b9e.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<style type="text/css">
.bs-header-margin{
margin: 20px;
}
.btn-default
{
background-color: #020152;
color:#fffff;
border-color: #020152;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
background-color: #020152;
color:#fffff;
border-color: #020152;
}
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
margin: 0 auto;
}
div.container {
width: 80%;
}
</style>
<cfif getRegions.recordcount>
<cfoutput>
<div id="dt_div">
<table id="dt_table" class="display" style="width:100%">
<thead>
<tr>
<th>Customer ID</th>
<th>Customer</th>
<th>Pack Number</th>
<th>Order Number</th>
<th>Ship Date</th>
<th>Ship Status</th>
<th>Pack Line</th>
<th>Part Number</th>
<th>Part Desc</th>
<th>Ship Qty</th>
</tr>
</thead>
<tbody>
<cfloop query="getRegions">
<tr>
<td>#getRegions.CustID#</td>
<td>#getRegions.Name#</td>
<td>#getRegions.PackNum#</td>
<td>#getRegions.OrderNumber#</td>
<td>#getRegions.ShipDate#</td>
<td>#getRegions.ShipStatus#</td>
<td>#getRegions.PackLine#</td>
<td>#getRegions.PartNum#</td>
<td>#getRegions.LineDesc#</td>
<td>#getRegions.ShipQty#</td>
</tr>
</cfloop>
</tbody>
</table>
</div>
</cfoutput>
</cfif>
<script>
$(document).ready( function () {
$('#dt_table').DataTable({
"lengthMenu": [[15, 40, 60, -1], [15, 40, 60, "All"]]
});
} );
</script>
我不确定我错过了什么,但希望有人能提供帮助。谢谢
解决方案
- As per the example above: https://www.quackit.com/ajax/tutorial/
- It works if you add the below code snippet in selectRegions.js page after this line "document.getElementById("regionList").innerHTML=oXmlHttp.responseText"
$('#dt_table').DataTable({
"lengthMenu": [[15, 40, 60, -1], [15, 40, 60, "All"]]
});
推荐阅读
- javascript - 嵌套对象总数
- xml - 如何在 Angular 7 中读取 XML 文件(来自不同的目录,比如来自 destop)?
- spring-boot - 如何在 c:forEach Jsp 文件中显示地图对象
- c# - 为什么我的方法以布尔值返回结果?
- html - Vue.js 类绑定,在 css 类之间插入空格
- angular - 动态更改 ngx-datatable 中的行颜色
- sql - 未知的 Sql 异常(编号 = 102,消息 = ',' 附近的语法不正确。)
- c# - 如何在自签名 https 网络服务器 C# 中添加 IP 地址而不是本地主机
- containers - RUNNING HANDLER [nova : Restart nova-libvirt container]---失败
- ios - 如何自定义 UITableView 及其单元格以获得清晰的颜色分隔符和不同长度的单元格取决于标题?