Iain Simpson Iain Simpson - 3 months ago 45x
jQuery Question

TypeError: oColumn is undefined When Using jQuery Datatables Library

I am having a problem getting the jQuery Datatables library to show up properly on my Joomla website table.

The script is half styling my table and then giving up (I am getting the table header colour changed and text colour, but no datatables controls etc).

Firebug is also throwing the following error:

TypeError: oColumn is undefined

In my Joomla templates index.php I have the following in the

<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() {
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": true
} );
} );

The HTML / PHP 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">
<tr class="staff_table_head">
<th>Job Title</th>
<th>Email Address</th>

$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>';


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 which is well formed (i.e. valid HTML), with a header (defined by a HTML tag) and a body (a tag)

Datatable docs