我正在渲染的这个HTML页面位于价目表页面的底部。当我尝试在表上调用DataTable时，我收到以下错误..这很奇怪。似乎无法弄清楚为什么会抛出这个错误。
jquery.dataTables.min.js:50 Uncaught TypeError: h(...).val(...).on is not a function
at nb (VM6942 jquery.dataTables.min.js:50)
at mb (VM6942 jquery.dataTables.min.js:32)
at ga (VM6942 jquery.dataTables.min.js:48)
at e (VM6942 jquery.dataTables.min.js:92)
at HTMLTableElement.<anonymous> (VM6942 jquery.dataTables.min.js:92)
at Function.each (jquery-latest.js:45)
at init.each (jquery-latest.js:38)
at init.m [as dataTable] (VM6942 jquery.dataTables.min.js:82)
at init.h.fn.DataTable (VM6942 jquery.dataTables.min.js:164)
我的html文件：
<html>
<style>
body {
font-family: Segoe UI, Tahoma, Arial;
}
table {
font-size: 12px;
border-collapse: collapse;
border: 2px solid black;
}
#tableHead {
background-color: lightgrey
}
</style>
<body style="justify-content: justify">
<div id="tableContainer">
<div style="justify-content: center; float:left">
<table id="partsTable" class="tablesorter">
<thead id="tableHead">
<th>Price List Name</th>
<th>Part Number</th>
<th>SPA</th>
<th>Quantity</th>
<th>Quantity Type</th>
<th>Customer Part Number</th>
<th>Design Registration</th>
<th>Lead Time</th>
<th>Quoted Cost</th>
<th>Quoted User Price</th>
<th>Status</th>
</thead>
<tbody id="tableBody"></tbody>
</table>
<div id="pager" class="pager">
<form>
<img src="../_imgs/first.png" class="first" />
<img src="../_imgs/prev.png" class="prev" />
<input type="text" class="pagedisplay" />
<img src="../_imgs/next.png" class="next" />
<img src="../_imgs/last.png" class="last" />
<select class="pagesize">
<option value="">>LIMIT</option>
<option value="2">2 per page</option>
<option value="5">5 per page</option>
<option value="10">10 per page</option>
</select>
</form>
</div>
</div>
</div>
</body>
</html>
我的javascript：
$(document).ready(function() {
var pricelistId = getParameterByName("id");
var orgname = getParameterByName("orgname");
getPriceListItems(pricelistId, orgname);
var table = document.getElementById("partsTable");
table.border = "5";
table.style = "width: 100%; table-layout: flex;";
$("#partsTable").DataTable();
function getPriceListItems(id, orgname) {
trakPlatformClient.RequestHandler.Execute({
request: {
orgName: orgname,
messageName: "sp_get_dwpricelistitem",
parameters: [{
Key: "pt_designwinpricelistid",
Value: id
}]
},
context: this,
responseHandler: getItemSuccess,
handlerArgument: null,
errorHandler: getItemError
});
}
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function getItemSuccess(result, handlerArgument) {
var parts = new Array();
for (var i = 0; i < result.Table.Rows.length; i++) {
parts.push(result.Table.Rows[i]);
}
console.log(parts);
var tableBody = document.getElementById("tableBody");
for (var i = 0; i < parts.length; i++) {
var pt_designwinpricelistidname = parts[i].pt_designwinpricelistidname;
var pt_designwinpricelistitemid = parts[i].pt_designwinpricelistitemid;
var row = tableBody.insertRow(-1);
var hiddenCell = row.insertCell(-1);
hiddenCell.id = "pricelistID" + i;
hiddenCell.value = pt_designwinpricelistitemid;
hiddenCell.innerHTML = pt_designwinpricelistidname;
hiddenCell.style.visibility = "visible";
var pt_partidname = parts[i].pt_partidname;
var am_spaname = parts[i].am_spaname;
var am_quantitytype = parts[i].am_quantitytype;
var quantity = parts[i].quantity;
var am_customerpartnumber = parts[i].am_customerpartnumber;
var pt_designregistrationpartidname = parts[i].pt_designregistrationpartidname;
var am_leadtime = parts[i].am_leadtime;
var am_quotedcost = parts[i].am_quotedcost.toPrecision(5);
var am_quoateduserprice;
if (parts[i].am_quoteduserprice != null) {
am_quoateduserprice = parts[i].am_quoteduserprice.toPrecision(5);
} else {
var num = 0
am_quoateduserprice = num.toPrecision(5);
}
var statuscode = parts[i].statuscode;
var statuscodename;
if (statuscode == 1) {
statuscodename = "Active";
} else {
statuscodename = "Inactive";
}
var quantitytypename;
if (am_quantitytype == 1) {
quantitytypename = "Annual"
} else if (am_quantitytype == 2) {
quantitytypename = "Quarterly"
} else {
quantitytypename = "One Shot"
}
var attributes = new Array();
attributes.push(pt_partidname);
attributes.push(am_spaname);
attributes.push(quantity);
attributes.push(quantitytypename);
attributes.push(am_customerpartnumber);
attributes.push(pt_designregistrationpartidname);
attributes.push(am_leadtime);
attributes.push(am_quotedcost);
attributes.push(am_quoateduserprice);
attributes.push(statuscodename);
for (var j = 0; j < attributes.length; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = attributes[j];
if (j == 0) {
cell.style = "text-decoration: underline";
}
}
}
}
function getItemError(e, s, t) {
console.log(e);
}
});
我不确定为什么DataTables不会初始化我的表。它有thead和tbody，我对丢失的错误感到迷茫。