jQuery Fixed Table Header Plugin 1.0

 - 5 October 2009 03:35 mustafaozcan

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


Paylaş

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

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

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

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

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

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

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

7/15/2010 4:17:21 PM #

Colin

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 Canada | Reply

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading



About the author

Mustafa OZCAN Mustafa ÖZCAN
Software Developer

E-mail me Send mail

PayPal Donate


Recent comments

Comment RSS

Calendar

<<  July 2010  >>
MoTuWeThFrSaSu
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

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 3744
   

Online : 2