Trouble with FixedHeader

Question

UPDATE: I talked to the author of FixedHeader, and it seems that it isn't going to work for me. I think the problem is that my table is inside of a tab, which is causing some problems (see the screenshots in my other update), and he said that the current version of FixedHeader doesn't address these issues. I've tried some other plugins and methods for fixed table headers, and they're all giving me similar problems. I suspect it's because my table is inside of a tab. If anyone has any easy solutions, please let me know. Otherwise, don't worry about it. I've got a lot of other stuff to work on for this website, and the fixed table header seems to be taking up too much time.

I'm trying to use FixedHeader for my website.

I downloaded FixedHeader.js and put it in vendor/assets/javascripts. I have //= require FixedHeader in application.js.

In colleges.html.erb I've set a class of table-fixed-header to each of my two tables, and have <%= javascript_include_tag :application %>. In colleges.js, I've got var oTable = $('.table-fixed-header').dataTable(); new FixedHeader( oTable );.

In the development environment, when I go to inspect element > resources (in chrome), FixedHeader.js loads, but there's 2 problems with colleges.js: it says...

var oTable = $('.table-fixed-header').dataTable();  
Uncaught TypeError: Object [object Object] has no method 'dataTable' (repeated 2 times)
new FixedHeader( oTable );  

What can I do to get this to work? (Right now it doesn't work at all.)

EDIT: I just messed around a little and didn't have success. I tried $.browser instead of jQuery.browser, but that gave me the same 'msie' error. Then I tried deleting that code altogether, and there were no javascript errors, but the fixed header didn't really work too well (the header started off at the top of my web page when it shouldn't, it wasn't sized properly etc.).

UPDATE: Using the updated version (https://github.com/DataTables/FixedHeader/blob/master/js/FixedHeader.js) gets the header to appear at the top of the page before you click on the table link (it shouldn't appear yet, and it shouldn't be at the very top). Also, it isn't sized the right way, and it doesn't have the sorting functionality. See these links:
- http://awesomescreenshot.com/00d1pe963a
- http://awesomescreenshot.com/09e1pe9581
- http://awesomescreenshot.com/0d21pe9a2b

Answer 1

could you try putting the javascript includes at the bottom of the page, just below the closing ""

• leave the normal rails stuff at the top
• add the FixedHeader include at the bottom of the page: <script src="/assets/FixedHeader.js" type="text/javascript"></script>