5
Por qué tengo este tipo de error "TypeError: oColumn no está definido" usando jquery datatables Seguí todas las instrucciones de sus documentos. No sé lo que está mal?Por qué tengo este tipo de error "TypeError: oColumn no está definido" usando jquery datatables Seguí todo desde sus documentos
Aquí hay salida de error de Firebug:
Aquí es mi estructura de la tabla html:
Y aquí está el código jQuery que utilizo:
<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>
mesa generado por 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);
}
}
});
La tabla HTML
<div>
<table id="products-result" class="display data-results table table-striped table-hover table-bordered">
</table>
</div>
Browser Ver Fuente:
<!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>
¿Puedes publicar el html generado por tu código? Me gusta de View Source? – hsalama
@hsalama, está un poco desordenado, ¡actualizado! :) –
Puede copiar desde el código generado (desde la fuente de visualización de su navegador) en lugar de su propio código. Estoy interesado en ver la estructura final de la tabla cuando se aplica el complemento. – hsalama