"oCol is Undefined" Using Datatables and jQuery Ui Dialog

Question

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.

Capuchin

Answer 1

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.

Jorrie

Yes, You're Right. This solved the problem. Thank you (2 months later) – Capuchin

This is only the solution if you have more headings than cells in a row or vice versa, the correct solution is that of thugsb. although it may Fix the problem at hand, it's papering over the cracks. – Bresee

If I have 6 columns, i.e. <th>'s, yet only 4/6 are content, i.e. the other two are buttons, my JSON response, i.e. server-side, returns a JSON object with only 4 key-value pairs. How can I tell datatables to simply display the other 2 <td> buttons as-is, i.e. without affecting/re-writing/hiding them? – Attainable

Answer 2

This may be happening because your table is not structured correctly. Make sure to have thead and tbody. I had this error, and once I added the thead and tbody it was gone. My settings were nothing like the settings in the other reply - I'm not sure why that one worked, as it didn't for me.

table
  thead
    tr
      th`s
  tbody
    tr`s
      td`s

Caprice

This. I ran into this when I added a column in the body but failed to add a th for it. – Abortive

Answer 3

The jQuery datatables plugin requires that the number of elements in the <tbody> tag match the number of <th> elements in the <thead> tag of your table.

Bombazine

Answer 4

$("#tRes").dataTable({ "bPaginate": true, "bLengthChange": true, "bFilter": true, "bSort": true, "bInfo": true, "bAutoWidth": true, });

Remove this code from your page and check syntax of setting values of text boxes then it will work fine.

Fermin