jQuery Fixed Table Header Plugin 1.0

10/31/2009 7:50:48 AM #

Thank you so much for this and for sharing it. One question--it seems that if you include a tfoot in the table HTML, it breaks the functionality in just IE7. Is there anyway around this? It doesn't completely break it but the only way to get the fixed header to work is to scroll the page down a bit and then refresh the page. Thanks again! (I'm sorry if this got posted multiple times!!)

rubycat | Reply

11/2/2009 8:58:25 AM #

Hi, me again. I have a search form in the table header and in IE8, once you begin scrolling the page and then try to use the search, it won't work--clicking on the submit button doesn't do anything, nor does simply hitting enter when in the text field. Any ideas if this can be fixed? I'm anxious to use this because it is absolutely perfect in terms of functionality. You really did a great job!

rubycat | Reply

12/1/2009 6:55:53 AM #

Hi Mustafa,

Great plug-in. I’ve changed 2 lines to let it work for my sites:
$clonedTable.attr("id", "fixedtableheader" + i)
   .css({ "position": "fixed", "top": "0", "left": $tbl.offset().left })
   .append($tblhfixed.clone(true))
   .width(tblwidth)
   .hide()
   .insertAfter( $tbl )

1) I need my handlers cloned
2) If I append the cloned table to body, my CSS doesn’t work anymore. Insert the cloned table after the original table, this way it stays in the same div.

Regards,
Anton

Anton Slabbinck | Reply

7/15/2010 9:17:21 AM #

Wanted you to know that your jquery plugin was a MASSIVE help to me on a project I am working on.  You made my day, my friend.  Thank You!!!

Colin | Reply

8/21/2010 12:38:10 AM #

Hi Mustafa!

First of all, kudos for your most excellent and elegant jQuery Fixed Table Header Plugin, and thanks for sharing it.

I want to give back sharing with you two minor features we needed to add:


1. Using THEAD if there's one

In our design, there were tables with different row count on the header. We felt the THEAD tag as most sensible way to mark them up, and made the script look for those tags in the first place.

var $tblhfixed = $tbl.find("thead tr");
if( $tblhfixed.length == 0){ // ...or first [headerrowsize] rows.
   $tblhfixed = $tbl.find("tr:lt(" + settings.headerrowsize + ")");
  };


2.Add a class to the floating (fixed) header

We needed to style the header a bit differently when it's floating. A class, that can be changed in the fn settings, is being added when creating the element.

var settings = jQuery.extend({ /* ... */ fixedtableheaderclass: "fixedtableheader" }, options);

$clonedTable.addClass( settings.fixedtableheaderclass ).attr("id", "fixedtableheader" + i).css /* ... */


Greetings from Buenos Aires, Argentina,

Santiago Bustelo
Design and Development director
Icograma.com

Santiago Bustelo | Reply

12/8/2010 10:05:04 AM #

well i must say incredible script and i like it , just that i could not get it working with jquery 1.4.2 , i had to use the earlier version which was used in demo , if you could upgrade the script that would be great of you.

nikesh | Reply

12/8/2010 1:00:32 PM #

sorry again , it works fine with the latest version on jquery  , just that it was not responding in wordpress , i had to replace all $ with jQuery and it worked like a charm ,

thanks

nikesh | Reply

7/29/2011 6:33:42 PM #

Hi Mustaf

asp.net fixed header for gridview is working fine , but I am facing one problem,
i.e when page loaded it is working fine. After page load I have some events (paging, edit, like ...) for gridview , if i apply any event , then the fixed header of grid view is not working (header is not fixing).
Please help out this issue.

Thanks
Mahender muppa

Mahender Muppa | Reply

9/5/2011 1:30:24 PM #

Hi Mustafa,

When I try fixedtableheader using Coldfusion 9 and Internet Explorer 8 or 9, why can not ya,
but if I run it using the mozilla browser, fixedtableheader runs perfectly.
Mustafa can help me.

Thank you

Darwan Leonardo Sitepu | Reply

9/16/2011 11:43:41 AM #

Hi, thanks for this helpfull plugin !

did someone have this issue with latest versions of Chrome ?
the header's cells have slightly different widths ... Open your demo page with Chrome 12,13 or 15 ... I couldn't figure out what's wrong, I compared the computed CSS line by line... no difference, but the fixed header is different from the "original".

i use THEAD / TH on one row
And now that I have added more css attributes for sorting my table (background image with margin / padding), this bug is much worse !
I think there is a difference in Chrome's rendering depending on the "position" css attribute...

please have a look at my snapshots...

picasaweb.google.com/.../JqueryFixedHeaderTrouble

regards

Samuel | Reply

9/27/2011 5:02:29 PM #

Hi Mustafa,
Thanks for a nice plugin.
I modified a few lines to work with sharepoint 2010 and the fixed ribbon at top.
Instead of $(window).scroll,
I now have:-
   $("#s4-workspace").scroll(function () {
                    var ribbontopheight = $(".ms-cui-ribbonTopBars").height();
                    var ribbontopcontainerheight = $(".ms-cui-tabContainer").height();
                if (jQuery.browser.msie && jQuery.browser.version == "6.0")
                    $clonedTable.css({ "position": "absolute", "top": $(window).scrollTop(), "left": $tbl.offset().left });
                else $clonedTable.css({ "position": "fixed", "top": ribbontopheight + ribbontopcontainerheight, "left": $tbl.offset().left - $(window).scrollLeft() });
                var sctop = $(window).scrollTop();
                var elmtop = $tblhfixed.offset().top;
                if (sctop > elmtop && sctop <= (elmtop + $tbl.height() - $tblhfixed.height()))
                    $clonedTable.show();
                else $clonedTable.hide();
            });
Please let me now your comments on the same.
Thanks,
Ashwini

Ashwini | Reply

10/4/2011 5:37:55 PM #

Hi there, really nice plugin!!

But i have a question...I have a table in my jsp, i´m using liferay 5.3.2 ( that uses jquery 1.2.6) and i´m having sonme issues...Is there a way that i can use this plugin with this older version of jquery?

Markus | Reply

12/20/2011 10:30:33 PM #

Works great after the IE hack mentioned by the other guy.  I have run into an issue with printing.  The floating table shows up in the middle of the printout.  Open to ideas...

JT Moree | Reply

12/21/2011 12:21:38 AM #

What if I want to turn the floating header off?  In this case the printing problem has let me to the idea of letting the user toggle the floating on and off as needed.  I can turn the float on by activating the function .fixedtableheader() but what if I want to turn if off?  I'm trying to study the code but it's minified and hard to read.... Maybe adding an option to the invoked function?

On top of that if a table already has the floating header and .fixedtableheader() is called on it again it should not create another header.  Seems like it will create them if the call is made again.

JT Moree | Reply

3/28/2012 1:56:23 PM #

It stops working after the partial page update of an update panel. How to go about it? My table may or may not visible at all times.

AlphaDog | Reply

4/12/2012 12:22:13 PM #

Hi Mustafa, I'm testing your plugin, unfortunatly jQuery plugin site is not available at the moment, so I'm not able to download the NON minified version of the JS, can you send it to me ??

I encounter some littles worries: some of the headers cells are not exactly aligned with the body! Have you already have see that? Do you have an idea, of where to look, so as to resolve that?

I'm expecting the javscript code, so as to go deeper in the code to see if I can help somewhere!

Gab | Reply

5/9/2012 11:15:00 AM #

Hi Mustafa!

When I have autorefresh (every 15 seconds) on my page, the browser occupies more and more memory until it crashes (new elements on the page are created after every autorefresh).

Miroslav Gubečka | Reply

7/25/2012 10:06:01 PM #

The plugin is no longer available on archive.plugins.jquery.com/.../fixedtableheader is it hosted somewhere else?

Kevin | Reply