I am having trouble using the jQuery library DataTables. I have followed their documentation, and have run into an odd problem. To begin with, I was trying to use the FixedColumn feature, but even the example that they offer doesn't run (at least not the one in the jsBin setup linked from http://datatables.net/extras/fixedcolumns/#). My primary concern, though, is that I am unable to get any functionality at all from DataTables. I have created a simplified version of the site I am trying to work on just to locate the problem, and the simplified code works in jsBin (to an extent) but not at all on my own system. The simplified code is included below. Does anyone know what might be causing this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
var travelTableScroll = $('#travelTable').dataTable();
new FixedColumns(travelTableScroll);
});
</script>
</head>
<body>
<table id="travelTable" class="display">
<thead>
<tr>
<th>Employee</th>
<th>January</th>
<th>February</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>June</th>
<th>July</th>
<th>August</th>
<th>September</th>
<th>October</th>
<th>November</th>
<th>December</th>
<th>January</th>
<th>February</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>June</th>
<th>July</th>
<th>August</th>
<th>September</th>
<th>October</th>
<th>November</th>
<th>December</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</body>
</html>
UPDATE: Well, I have tried adding the proper number of cells to each row, as suggested below. Also, I included the link to FixedColumns (I had assumed that it was a part of DataTables and didn't need to be included separately, but I guess not). However, I am still not getting any functionality. I'm not sure if it's the same problem or not (I had somehow forgotten about the existence of console output over the past year- I've been away from web design for a long time), but now I am getting the error TypeError: $(...).dataTable is not a function. I have done some looking on Google, and the possible causes seem to be that either DataTables is not loaded or that jQuery has been loaded twice. I can't figure out where the issue is coming from, but the only link / script lines before the one in question are as follows:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>
FINAL Update: I found the source of this last problem- turns out that, since I am using a .NET framework from the dreaded Microsoft's Visual Studio editor, I hadn't seen the layout file fully, and there was a line in there that imported some other version of jQuery. Apparently that was the issue, because once I removed it the tables began rendering properly. Thanks for all the help!
