Menu
I am having a problem getting the jQuery Datatables library to show up properly on my Joomla website table. http://datatables.net
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 <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>
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>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>
860
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
138
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! :)
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
