为什么我在使用 jquery 数据表时遇到这种类型的错误“TypeError:oColumn 未定义”我遵循了其文档中的所有说明。我不知道哪里出了问题？
这是 Firebug 的错误输出:
这是我的 html 表格结构:
这是我使用的 jquery 代码:
<style type="text/css" title="currentStyle">
@import "datatables/media/css/demo_table.css";
</style>
<script src="datatables/media/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#products-result').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
} );
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );
} );
</script>
由 jquery 生成的表:
$.ajax({
url: 'get-products.php',
type: 'post',
datatype: 'json',
data: { category: $('.category').val().trim(), keyword: $('.keyword').val().trim() },
beforeSend: fnLoadStart,
complete: fnLoadStop,
success: function(data){
var toAppend = '';
toAppend += '<thead><tr><th>Name</th><th>Image</th><th>Price</th><th>Shipping</th><th>Weight</th><th>Dimension</th><th>ASIN</th><th>Description</th><th>Reviews</th><th>Category</th></tr></thead>';
toAppend += '<tbody>';
if(typeof data === "object"){
for(var i=0;i<data.length;i++){
var price = '';
if(data[i]['price'] === null){
price = 'No Price Available';
}
else {
price = data[i]['price'][0];
}
var img = '';
if(data[i]['image'] === null){
img = '<img class="no-image" src="no-image.jpg" alt="">';
}
else {
img = '<img src="'+data[i]['image'][0]+'" alt="">';
}
var description = '';
if(data[i]['product_description'] == 'Not Available'){
description = data[i]['product_description'];
}
else {
description = data[i]['product_description'][0];
}
toAppend +=
'<tr><td><p>'+
data[i]['product_name'][0]+'</p></td><td>'+
img+'</td><td>'+
price+'</td><td><ul><li><span>Standard: </span>'+
data[i]['standard_shipping']+'</li><li><span>Expedited: </span>'+
data[i]['expedited_shipping']+'</li><li><span>Two-day: </span>'+
data[i]['twoday_shipping']+'</li><li><span>One-day: </span>'+
data[i]['oneday_shipping']+'</li></ul></td><td>'+
data[i]['weight']+'</td><td>'+
data[i]['dimension']+'</td><td>'+
data[i]['asin'][0]+'</td><td><p>'+
description+'</p></td><td><iframe src="'+
data[i]['reviews'][0]+'"></iframe></td><td>'+
data[i]['category'][0]+'</td></tr>';
}
toAppend += '</tbody>';
$('.data-results').append(toAppend);
}
}
});
HTML 表格
<div>
<table id="products-result" class="display data-results table table-striped table-hover table-bordered">
</table>
</div>
浏览器查看源代码:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Products</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/main.js"></script>
<script src="js/search.js"></script>
<style type="text/css" title="currentStyle">
@import "datatables/media/css/demo_table.css";
</style>
<script src="datatables/media/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#products-result').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
} );
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );
} );
</script>
</head>
<body>
<div>
<div class="span7">
<form class="form-inline">
<select class="category">x
<option>All</option>
<option>Apparel</option>
<option>Appliances</option>
<option>ArtsAndCrafts</option>
<option>Automotive</option>
<option>Baby</option>
<option>Beauty</option>
<option>Blended</option>
<option>Books</option>
<option>Classical</option>
<option>Collectibles</option>
<option>DVD</option>
<option>DigitalMusic</option>
<option>Electronics</option>
<option>GiftCards</option>
<option>GourmetFood</option>
<option>Grocery</option>
<option>HealthPersonalCare</option>
<option>HomeGarden</option>
<option>Industrial</option>
<option>Jewelry</option>
<option>KindleStore</option>
<option>Kitchen</option>
<option>LawnAndGarden</option>
<option>Marketplace</option>
<option>MP3Downloads</option>
<option>Magazines</option>
<option>Miscellaneous</option>
<option>Music</option>
<option>MusicTracks</option>
<option>MusicalInstruments</option>
<option>MobileApps</option>
<option>OfficeProducts</option>
<option>OutdoorLiving</option>
<option>PCHardware</option>
<option>PetSupplies</option>
<option>Photo</option>
<option>Shoes</option>
<option>Software</option>
<option>SportingGoods</option>
<option>Tools</option>
<option>Toys</option>
<option>UnboxVideo</option>
<option>VHS</option>
<option>Video</option>
<option>VideoGames</option>
<option>Watches</option>
<option>Wireless</option>
<option>WirelessAccessories</option>
</select>
<input class="keyword" type="text" placeholder="Keyword">
<input type="button" class="btnresult btn" value="Generate">
</form>
</div>
<div id="ajaxLoader">
<img src="loading.gif" alt="">
</div>
<div>
<table id="products-result" class="display data-results table table-striped table-hover table-bordered">
</table>
</div>
</div>
</body>
</html>
最佳答案
希望这对大家有帮助，至少能从中得到一些提示。
http://datatables.net/forums/discussion/comment/42607
我的问题是，TypeError: col 未定义。
总结答案:
Number of TH elements within the TR element within the THead element of the Table MUST BE EQUAL to the Number of TD elements(or number of columns within your Table Rows) within the TR element(s) of your TBody in the Table.
您可以阅读下面的解释:
问题是，我没有在 thead 部分中放置足够的 Th 或 Td 元素，以等于我在 TBody 部分的 Tr 元素中打印为 Td 元素的列数。
下面的代码确实给了我错误。
<thead>
<tr>
<th> Heading 1</th>
<th> Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> Column 1 </td>
<td> Column 2</td>
<td> Column 3</td>
</tr>
</tbody>"
但是，只要在 THead 元素中向 Tr 元素再添加一个 Th 元素，它的效果就非常棒! :) 我从上面的链接中得到了提示。
而且，我发现 THead 的 Tr 元素中的所有 TH 元素也可以是 TD 元素，因为它也是 jQuery DataTables 所需级别的有效 HTML!
希望我能帮助你们中的一些人节省你们的时间! :)
关于jquery - 为什么我在使用 jquery 数据表时遇到这种类型的错误 "TypeError: oColumn is undefined"我从它的文档中得到了所有信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12658392/