I am using the jQuery DataTables library to style the tables on my website which is running Joomla 2.5. http://datatables.net/
The problem I am having is its not working, but it also isn't giving any sort of error in firebug either, so I have no trail to follow or anything.
The HTML / PHP of my table goes like this:
<table class="staff_table">
<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>
<tr class="staff_table_head">
<td>Name</td>
<td>Job Title</td>
<td>Email Address</td>
</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>
I am loading jQuery and the DataTables library and initializing it like this in the index.php of the template file :
<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">
$(document).ready(function() {
$('#staff_table').dataTable();
} );
</script>
The above should give me something along the lines of the following:
jQuery is certainly working, as if I use the following it pops a box up as expected:
$(document).ready(function() {
alert('hi');
});
I have even tried jQuery No Conflict, by adding jQuery.noConflict(); before I call the function and still nothing, no errors, no working.
EDIT
If I change to the following I then get the following error:
<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();
} );
</script>
This is the error I get in Firebug:
TypeError: oColumn is undefined
initialize(b=Object { tweakInitial={...}, tweakSubsequent={...}, tweakSizes={...}, more...}, a=Object { options={...}, element=ul.menutop, rtl=false, more...}, c=span#span- 1346841479204301.daddy)fusion.js (line 8)
initialize()mootools-more.js (line 27)
b()mootools-core.js (line 140)
g()mootools-core.js (line 135)
initialize(o=span#span-1346841479204301.daddy, m=1)fusion.js (line 8)
forEach(i=function(), v=Object { options={...}, element=ul.menutop, rtl=false, more...})mootools-core.js (line 39)
initialize(f="ul.menutop", k=Object { pill=0, effect="slide and fade", opacity=1, more...})fusion.js (line 8)
initialize()mootools-more.js (line 27)
b()mootools-core.js (line 140)
g()mootools-core.js (line 135)
(?)()school-staff (line 77)
fireEvent(f=function())mootools-core.js (line 370)
forEach(i=function(), v=Window school-staff)mootools-core.js (line 39)
fireEvent(e="domready", c=[], b=undefined)mootools-core.js (line 370)
g()mootools-core.js (line 507)
[Break On This Error]
...start({"margin-top":this.height,opacity:0}).chain(function(){if(this.childMenu.f...
fusion.js (line 8)
