TypeError: oColumn is undefined When Using jQuery Datatables Library

For datatable to work properly, your tables must be constructed with a proper <thead> and <tbody> tags.

All DataTables needs in your HTML is a <TABLE> which is well formed (i.e. valid HTML), with a header (defined by a <THEAD> HTML tag) and a body (a <TBODY> tag)

Datatable docs

Sorted it !, it turns out datatables is VERY strict about the html it accepts before it throws an error. I added tags to my html and now it is working, also note that you must have tags for your header columns and not tags as this also throws an error.

The html code now looks like this :

<h3>Members of Staff</h3> <p>If you're looking for a member of staff at Tower Road Academy, you'll find their      details here.</p> <table class="staff_table" id="staff_table"> <thead> <tr class="staff_table_head"> <th>Name</th><th>Job Title</th><th>Email Address</th> </tr></thead> <?php$result = mysql_query("SELECT * FROM itsnb_chronoforms_data_addstaffmember");while($row = mysql_fetch_array($result))   {echo '<tr>';  echo '<td>' . $row['staff_name'] . '</td><td>' . $row['staff_job'] . '</td><td><a         href=mailto:"' . $row['staff_email'] . '">' . $row['staff_email'] . '</a>' . '</td>';    echo '</tr>';  } ?></table>

and calling the jquery etc looks like this :

<script src="./datatables/js/jquery.js" type="text/javascript"></script>    <script src="./datatables/js/jquery.dataTables.js" type="text/javascript"></script>            <script type="text/javascript">  jQuery(document).ready(function() {jQuery('#staff_table').dataTable({    "bLengthChange": true,    "bFilter": true,    "bSort": true,    "bInfo": true,    "bAutoWidth": true} );} );  </script>

Hope this would help you all, at least to get a hint out of it.

http://datatables.net/forums/discussion/comment/42607

My problem was, TypeError: col is undefined.

Summarized Answer:

Number of TH elements within the TR element within the THead element of the Table MUST BE EQUAL to the Number of TD elements(or number of columns within your Table Rows) within the TR element(s) of your TBody in the Table.

You can read the explanation bellow:

The problem was, I hadn't put enough Th or Td elements within the thead section to be equal to the number of columns which I print as Td elements inside the Tr elements within the TBody section.

Following code did give me the error.

<thead> <tr>    <th> Heading 1</th>    <th> Heading 2</th> </tr></thead><tbody> <tr>    <td> Column 1 </td>    <td> Column 2</td>    <td> Column 3</td> </tr></tbody>"

But just adding one more Th element to the Tr element within the THead element made it works like a charm! :) And I got the hint from the above link.

And also, I found that all the TH elements within the THead's Tr element could be TD elements too, as it's also valid HTML to the required level by the jQuery DataTables!

Hope I helped some of you to save your time! :)