Menu
Why I am having this type of error "TypeError: oColumn is undefined" using jquery datatables I followed all instructions from its docs. I dont know what is wrong?
Here's the firebug's error output:
Here's my html table structure:
And here's the jquery code I use:
<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>
table generated by 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);
}
}
});
The HTML table
<div>
<table id="products-result" class="display data-results table table-striped table-hover table-bordered">
</table>
</div>
Browser View Source:
<!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>
587
Hope this would help you all, at least to get a hint out of it.
http://datatables.net/forums/discussion/comment/42607
My problem was, TypeError: col is undefined.
Summarized Answer:
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.
You can read the explanation bellow:
The problem was, I hadn't put enough Th or Td elements within the thead section to be equal to the number of columns which I print as Td elements inside the Tr elements within the TBody section.
Following code did give me the error.
<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>"
But just adding one more Th element to the Tr element within the THead element made it works like a charm! :) And I got the hint from the above link.
And also, I found that all the TH elements within the THead's Tr element could be TD elements too, as it's also valid HTML to the required level by the jQuery DataTables!
Hope I helped some of you to save your time! :)
87
OK, it looks like your table is empty on load, so datatables might not work since it is not formatted properly to start with. So, I'd suggest you build your table with a proper HTML first before you populate it via ajax. So try to make this
<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>
and then via your ajax do append to the tbody
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
