TypeError: oColumn no está definido cuando se utiliza la biblioteca de datos de jQuery

Estoy teniendo problemas para que la biblioteca de datos de jQuery aparezca correctamente en la tabla de mi sitio web de Joomla.http://datatables.net

La secuencia de comandos es mitad de estilo de mi tabla y luego se rinde (estoy cambiando el color del encabezado de la tabla y el color del texto, pero no hay controles de datos, etc.).

Firebug también está lanzando el siguiente error:

 TypeError: oColumn is undefined

En mis plantillas de Joomla index.php tengo lo siguiente en el<head>:

<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.noConflict();                
    jQuery(document).ready(function() {
    jQuery('#staff_table').dataTable({
        "bLengthChange": true,
        "bFilter": true,
        "bSort": true,
        "bInfo": true,
        "bAutoWidth": true
        } );
    } );
</script>

El HTML / PHP se ve así:

<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>Name</th>
        <th>Job Title</th>
        <th>Email Address</th>
    </tr>

    <?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>

Respuestas a la pregunta(4)

Su respuesta a la pregunta