当用户输入客户代码时，我试图在我的页面上显示数据表表-传递参数，查询返回正确的数据，但是当返回数据时，它在标准表中，而不是应设置的格式。以下是我的页面代码：索引页
<!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"]]
});