CODEWITHSUNDEEP
jqueryjquery-uidatatablesjquery-ui-dialog
Alejandro Echeverri
Alejandro Echeverri

Reputation: 1358

"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.

Upvotes: 15

Views: 21114

Answers (4)

G. I. Joe
G. I. Joe

Reputation: 1653

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.

Upvotes: 2

Soundar Kumar B R
Soundar Kumar B R

Reputation: 21

$("#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.

Upvotes: 0

thugsb
thugsb

Reputation: 23426

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

Upvotes: 21

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

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.

Upvotes: 8

Related Questions