jQuery Fixed Table Header Plugin 1.0

 - 5 October 2009 03:35 Mustafa ÖZCAN

Fixed Table Header is fixing header row of table without div overflow. It is fix header row of table when scroll down the page.

You can use fixedtableheader plugin with ASP.NET DataGrid or GridView.

Tested with: 

  • Internet Explorer 6 - 7 - 8
  • Firefox 3.5.3
  • Google Chrome 4.0.220.1
  • Safari 4.0.3
  • Opera 10.00

You can see demo page and description :

jQuery Fixed Table Header Plugin Demo Page

 

For download plugin :

Click for download  jquery.fixedtableheader plugin on jquery.com

Bookmark&Share

Tags: , , , ,

JavaScript

Comments

10/31/2009 2:50:48 PM #

rubycat

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 United States |

11/3/2009 1:58:39 AM #

Mustafa ÖZCAN

Updated demo page for you and added tfoot in first html table. It is perfecly running in IE7 and others. You can see it inspect source code of demo page.

Mustafa ÖZCAN Turkey |

11/2/2009 3:58:25 PM #

rubycat

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 United States |

11/3/2009 2:03:45 AM #

Mustafa ÖZCAN

Yes it is true question Smile ... I added simple search criteria to second table in html demo page. But you can use this with two jQuery helper functions in source code of demo page. I think It can be solution for your problem.

Mustafa ÖZCAN Turkey |

11/3/2009 4:06:02 PM #

rubycat

Ack! I can't get it to work. I think I am stumbling over the second function (FixedSearchTest) and how to alter it so that the search still works? Can you tell I don't understand javascript very well? Smile

Like, whether or not the text value is or isn't empty, don't show the alert, do my search. Did that make sense?

rubycat United States |

11/6/2009 7:45:06 AM #

Mustafa ÖZCAN

You can pass input value to your javascript search function by $txt.val() in FixedSearchTest function. FixedSearchTest function is showing input value when pressing the button.

You must learn little javascript. It is easy Smile

Mustafa ÖZCAN Turkey |

12/1/2009 1:55:53 PM #

Anton Slabbinck

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 Belgium |

Comments are closed

About the author

Mustafa OZCAN Mustafa ÖZCAN
Software Developer

E-mail me Send mail

Recent comments

Comment RSS

Calendar

<<  March 2010  >>
MoTuWeThFrSaSu
22232425262728
1234567
891011121314
15161718192021
22232425262728
2930311234

View posts in large calendar

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in  anyway.

© Copyright 2008

Added Files

File Hit
jquery-1.2.6-intellisense.js 3444