I'm having problems using jQuery data library. I completed their documentation and ran into an odd problem. Firstly, I tried to use the FixedColumn function, but even the example they offer does not start (at least not in the jsBin setting, linked from http://datatables.net/extras/fixedcolumns/# ). My main problem, however, is that I cannot get any functions from DataTables at all. I created a simplified version of the site I'm trying to work on, only to find the problem, and the simplified code works in jsBin (to some extent), but not at all on my own system. Simplified code is given below. Does anyone know what might cause 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 tried adding the correct number of cells to each row, as suggested below. In addition, I included a link to FixedColumns (I assumed that it was part of DataTables and should not be included separately, but I think not). However, I still do not get any features. I’m not sure if the same problem existed or not (I somehow forgot about console output for the last year - I haven’t been in web design for a long time), but now I get a TypeError: $(...).dataTable is not a function error TypeError: $(...).dataTable is not a function . I looked at Google, and the possible reasons seem to be that either DataTables is not loaded, or that jQuery is loaded twice. I can’t understand where this problem comes from, but the only lines of communication / script before it comes to the following:
<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 - it turns out that since I use the .NET infrastructure from the scary Microsoft Visual Studio editor, I did not see the layout file completely, and there was a line that imported some other version of jQuery. Apparently, this was a problem, because as soon as I deleted it, the tables began to draw correctly. Thanks for the help!
Crash source share