Alejandro Echeverri Alejandro Echeverri - 5 months ago 91
jQuery Question

"oCol is Undefined" Using Datatables and jQuery Ui Dialog

I have a form, for search a registry. This form, shows the info in a

jQuery Dialog
, and, inside of the dialog, i am using
Datatables
(Yes, inside of the dialog i have an entire table). I am generating the TR's and TD's dynamically with PHP, and then, PHP paste the string in the HTML.
But, when the dialog is shown i get this error:


oCol is undefined:
oCol.fnSetData( oData, val );


I'm trying it in Firefox and Chrome and it's the same thing. Also i've searched in http://www.datatables.net, and i discarded a 'malformed table'. I've no idea of what i'm doing wrong.

Can you Help me with this issue?

This is my JS Block:

<script type="text/javascript" language="javascript" src="lib/jQuery/jquery-1.6.1.js"></script>
<script type="text/javascript" language="javascript" src="lib/jQuery Ui/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" language="javascript" src="lib/Datatables/DataTables-1.8.0/media/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#results").dialog({
title: "Results",
width: 900,
height: 500,
open: function(event, ui){
$("#tRes").dataTable({
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": true
});
}
});
});
</script>


This is my Table (With the PHP Snippet):

<div id="results">
<table id="tRes">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>State</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?php
echo $rows;
?>
</tbody>
</table>
</div>


Thanks in Advance.

Answer

Have you tried settings your Columns like this:

                    $("#tRes").dataTable({
                        "bPaginate": true,
                        "bLengthChange": true,
                        "bFilter": true,
                        "bSort": true,
                        "bInfo": true,
                        "bAutoWidth": true,
                     "aoColumns": [
                                        null,
                                        null //put as many null values as your columns

                    ]
                    });

If this still don't work, can you please post the generated html too? Another thing you could consider is initializing the table on document.ready and not only when you open the dialog, but i don't think that's the issue here.

Comments