为什么我有这种类型的错误"TypeError:oColumn是未定义的"使用jquery数据表我从它的文档中跟随了所有
Bra*_*hed 5 html jquery jquery-plugins datatables
为什么我有这种类型的错误"TypeError:oColumn is undefined"使用jquery数据表我遵循了其文档中的所有指令.我不知道出了什么问题？
这是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>
Ran*_*man 16
希望这会对你们所有人有所帮助,至少可以从中得到一些暗示.
http://datatables.net/forums/discussion/comment/42607
我的问题是,TypeError:col未定义.
总结答案:
表格的THead元素中TR元素内的TH元素数量必须与表格中TBody的TR元素内的TD元素数量(或表格行中的列数)相等.
你可以阅读下面的解释:
问题是,我没有在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!
希望我帮助你们中的一些人节省你的时间!:)
- 我节省了很多时间,谢谢!我有正确的记录,但没有把它们放在thead和tbody中 (4认同)
好的，看起来您的表在加载时是空的，因此datatables可能无法工作，因为它的格式不正确。因此，我建议您先使用适当的 HTML 构建表格，然后再通过 ajax 填充表格。所以尝试做这个
<div>
<table id="products-result" class="display data-results table table-striped table-hover table-bordered">
<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>
<tbody></tbody>
</table>
</div>
然后通过你的ajax附加到tbody