“oCol is Undefined” Using Datatables and jQuery Ui

问题:

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.

回答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.

回答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

回答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.

回答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.