Iain Simpson Iain Simpson - 1 year ago 194
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>';

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download