Making Scrollable Tables with fixed headers – Updated
This post is an update to my previous post on making scrollable tables with fixed headers. I’ve had a few requests for adding additional functionalities, and I thought instead of cluttering the old post, I’ll do a new one for the updated script.
What’s new?
- Multiple tables on a single page
- Multiple header freezing
- Column freezing
To see it in action, please click here.
Implementation
- Download the file fxHeader_0.6.min.js and copy to your folder (An uncompressed fxHeader_0.6.js is also available)
- Include the above file in your HTML page
<script src="fxHeader_0.6.min.js" type="text/javascript"></script>
<script type=”text/javascript”>
fxheaderInit(‘dataTable1’,200,2,2);
fxheaderInit(‘dataTable2’,200,2,0);
fxheader();
</script>
fxheaderInit(‘dataTable1’,200,2,2);
fxheaderInit(‘dataTable2’,200,2,0);
fxheader();
</script>
Call fxheaderInit for every table you want to add scrolling. fxheader() is only required to call once.
Attributes for fxheaderInit function
- Table id
- Height (in pixels)
- No. of rows to freeze
- No. of columns to freeze
Width will be taken from the table’s width attribute, so make sure the table you’re passing in has got a width attribute. If width is specified in percentage, it will be calculated in regards to width of the document body, and not of the containing element (ie parentNode). Since width will be changed on window resize, fxheader() function will be attached to window.onresize, if any of the table’s width is specified in percentage. If your existing code has reliance on window.onresize event, please amend the fxHeader.js file.
If your table is generated by a framework like JSF or ASP.net, you’ll need to avoid any possible ID collision as discussed on my previous post.
Cheers,
Jaimon
148 Comments »
Leave a Reply
-
Recent
- Check digit calculator for barcodes and credit cards
- An Excel Addin to work with Unicode CSV files
- SimpleImageInfo – A Java class to get image size without loading the whole data
- Making Scrollable Tables with fixed headers – Updated
- Migrating 10g JSF Web project with ADF Faces components in jspx pages to 11g Facelets pages using Rich components
- Monitoring Log4J messages on a browser via server push
- Managing Vimeo video player via Javascript using Moogaloop API
- Making Scrollable Tables with fixed headers
- C# FTP Client Library
-
Links
-
Archives
- April 2013 (1)
- August 2011 (1)
- January 2011 (1)
- March 2010 (1)
- February 2010 (4)
- September 2009 (1)
-
Categories
-
RSS
Entries RSS
Comments RSS
Jaimon's Blog 
Dear Jaimon,
The script is working fine for FF2,IE7 and Chrome4 but for IE6 if I assign table width 100% it goes out of the page(window scroll appears).
Dear Jaimon,
In FF2 fixed column does not scroll vertically.
Hi Manohar,
I only tested it with IE7/8, FF3.5 and Chrome before.
Anyway, I’ve fixed the issues with IE6 and FF2 and have upated the post to reflect the new files. There is still a small issue with the IE6, where it shows a very small gap between two tables. Anyway, please take a look and let me know how it works for you.
Thanks,
Jaimon
Dear Jaimon,
Thanks, Now it is working in IE6.
In FF2 fixed columns are not scrolling.
Hi Manohar,
In my FF2 (Version 2.0.0.20), it is working fine. I can’t fix something I can’t reproduce. In any case, you have the full code to debug/fix the issue..
HTH
Jaimon
Has anyone successfully implemented form items within the table itself?? IE won’t show a selection in a select box in the fixed left column and Firefox won’t show a checked radio button in the body of the table. HTML View Code shows that the html is showing the options.
Hi Heather,
For the form items to work, you would need to change IDs of individual items after the table is cloned, as I’ve explained on the ADF Faces section on my previous post at https://jaimonmathew.wordpress.com/2010/02/02/scroller/
HTH
Jaimon
Dear Jaimon,
By using this script can we also fix the footer of the table?
Thanks.
Not yet!!
Jaimon
Hi,
I was using the old version of your fxHeader1 and fxHeader2 scrips on my site (depending on table size) and I recently noticed that when I added a second header row it wasn’t fixed. It was a nice surprise to find you have already been working on this, however the link to fxHeader_0.1.js appears to be timing out..
Could you point me to somewhere I can find the script?
Thanks a lot for this awesome script!
Jan
Its been fixed now
Jaimon
Hi Jaimon,
I was really struggling to make columns and headers both freeze and your script works great. I am having a minor issue with resizing. I have an outside table with a width of 100% and the table I am controlling with your script is nested within that table and has a width of 85%. When I resize from full screen to any smaller size, the frozen columns stay put but the rest of the columns line up under the frozen columns as if receiving a . When I resize back to full screen, the columns again line up properly. Note that there are about 20 non-frozen columns so there is horizontal scrolling as well as vertical. I am using IE7 and ASP. Any suggestions would be much appreciated.
Thanks,
Mike
Hi Mike,
Create an HTML/CSS/JS only pages to re-create this issue and send that to me (mail at jaimon.co.uk), and I’ll take a look..
Jaimon
Hi Jaimon,
Your Script was excellent. I was searching like mad for this functionality. You saved me. I had only one issue when I use Rowspan, I am getting white space below the headers. Can you please help me to fix that problem?
Thanks,
Prabhu
Hi Prabhu,
At the moment I’m taking a sum of one column’s offsetHeight in every fixed header row to calculate the total height required for the header table. With rowspan, this value will not just be the height of one row, causing the issue you’ve mentioned. I think instead of taking the offsetHeight of a particular column, if we get the lowest offsetHeight of all cells in a row, that might do the trick. Give it a try, and see if it works.
HTH
Jaimon
Hi there,
Great script but I think there are a couple of errors with the script I noticed that lines containing can cause problems:
In my table w never gets a width and hence it’s ”
var w = tbl[i].swidth + ”;
So if w = ” then (w-18) will cause problems
tbDiv.style.width=(w-18)+’px’;
There are two other places where this occurs, can you tell me if this is really a bug? or am I doing something wrong?
Regards DotnetShadow
Hi,
Its not a bug as such..
I’ve mentioned that you’ll need to specify the table width in absolute value or as a percentage of body width.
HTH
Jaimon
Thanks for that I must of missed that part
I’m getting the following script errors in IE8.
I’m also getting a double header (my header row is listed twice only in IE8)
Line 119
Error Invalid Argument
c[q].style.width=c2[q].style.width=(oc[q].offsetWidth-3) + ‘px’;
Line 2005
Error: Object doesn’t support this property of method
fxheader();
Thanks for the update.
Hi! I’m using IE6 and I’ve got the same problem as Manohar. The scroll bar of the table is just behind the page scroll bar. I have to scroll horizontal first to make the table scroll bar visible. How can I avoid this? Thanks a lot!
Hi Thomas,
If you can send me a very minimal reproducable test case, I’ll take a look..
HTH
Jaimon
If I set the table width to 98% its perfect. But then it looks quite ugly in FF3.6. I don’t understand it because in your code you are substracting 18 pixels in order to show the scroll bar in IE6.
I stripped my page so it has only one 100% width table left. But it does not solve the problem unfortunately. There is too much Struts code inside to give you a minimal test case as you requested.
With Jaimon’s help the solution for my problem is as follows:
If using IE6 make sure to use the XHMTL Strict Doctype definition in your HTML page:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Thomas
Transitional XHTML Doctype should also work..
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
HTH
Jaimon
No Jaimon, Transitional XHTML Doctype does NOT work. I’ve tested it on IE 6.0.2900 SP3. You have to use the Strict Doctype.
Hi! Thanks for your script! It is partly working in my program…. the scroll bar appears and the original headers are hidden, but it seems the header container is not appearing…
I’m new to web programming so I am a little lost as to how to tweak this or find the problem.
Thanks for your help!
Hi,
As always, if you can send me a very minimal html which replicate the issues, I’ll certainly have a look.
Thanks,
Jaimon
Natalie and Jaimon. I was having the same issue and I just made it work by eliminating some code on the function addScrollerDivs.
Originally is this:
sd2.innerHTML=’Please wait while loading the table..’;
sd2.innerHTML=’Please wait while loading the table..’;
I replaced the width:9999px with width:auto and that seemed to fix my issue.
I hope this help you out
Hi Jaimon,
Hope doing well,
I have used fxHeader_0.2.js file, Its really helped me a lot for fixing Grid header. I am able to fix the grid header with vertical & horizontal scroll’s as per my requirement.
But now I am facing two issues.
—————————————————————————————–
– CB – State_ID – Analysis – – –
– – – Date – – –
—————————————————————————————–
– CB – Some Text Crossing – 01/06/2010 12:00:00 – –
—————————————————————————————–
– CB – Some Text Crossing – 01/06/2010 12:00:00 – –
—————————————————————————————–
– CB – Some Text Crossing – 01/06/2010 12:00:00 – –
—————————————————————————————–
– CB – Some Text Crossing – 01/06/2010 12:00:00 – –
———————————————————
In above table structure you can see, header is having one check box (CB) for select all action, State_ID column and Analysis Date.
1. header cell(td) width is not adjusting to row->td cell with automatically.
I mean If i do nowrap on tr->td cell contents what ever the length TD cell arrages as single line text for that lengt that TD’s header cell right border also should come
You can see For State_ID header content is ‘Some Text Crossing’
2. the other issue By clicking on Select All Check box(CB) on header row, I am calling a JS function for onclick event, in which I am trying to get header checkbox object(CB)’s value(checked/unchecked,i.e true/false), but always object is coming as null.
In two ways I tried,
Header Checkbox ID is ‘selAll’ in table
var isChecked = document.forms[‘actionForm’].elements[‘selAll’];
Or
var isChecked = document.getElementById(“selAll”);
If(isChecked.checked){
Code for getting all row’s check boxes and checking/unchecking.
}
My problem is after I am unable to get the Header checkbox object, Please could you tell me the way how to handle it.
finally One more issue was, I want to fix the first column(Check box (CB)) of table, As this is a very big table with horizontal & vertical scrolls, user can navigate to right most side of the row, As we will fix the checkbox column, So at any time user can check any record.
But even though I have passed no of column parameter(1) to your js function, i.e
function(_tid,_sheight,_noOfRows,_noOfCols)
Its not handling properly.
So I am getting the checkbox column as seperately in one block, down to that remaining table is getting placed, I want this along with the table with proper alignments..
Also If header columns text having spaces between (ex: Analysis Date), It should not come to next line.(This could apply for only header not for rows data)
Please could you helpme out in this…
Thanks
Gopal
For clear understanding… if you could give me your email id, I can send the screenshot of my table and also the code(If required).
Hi Gopal,
It is mail at jaimon.co.uk
Jaimon
Hi Jaimon Mathew,
I am using fixHeader script. This is great script. But i have one problem with this script.
In scrollable part checkboxs not working. i.e The checkboxs are unable to checked/unchecked with javascript.
I think below code is not working with fixHeader script. But is is working without ‘fixHeader’ script.
document.getElementById(‘chk1’).checked = true;
document.getElementById(‘chk1’).checked = false;
Could you please tell me how to checked the checkbox through javascript .
Please reply me ASAP
Thanks,
pvkk
Hi, like I’ve mentioned in other replies, you will need to assign new ids for these cloned input check boxes you’re seeing on the page. See the ADF faces example in my original blog for code samples. Once you’ve that, you could use the new ids in your code instead of ‘chk1’.
HTH
Jaimon
First of all, THANK YOU VERY MUCH.
I’m developing a RoR application and your script is exactly what I was looking for.
There is only one issue and I’m sure you can help me. It works perfectly in all browsers but IE.
I’m getting a js error triggered by prototype.js. Something in your scripts seems to be calling:
function evalScripts() {
return this.extractScripts().map(function(script) { return eval(script) });
}
And it fails giving me “Object doesn’t support this object or method”
Do you have any idea what is going on?
Thanks in advance.
Hi Juan,
I’m pretty certain, fxHeader script doesn’t call the method you’ve mentioned 🙂
Having said that, when this script is used with other frameworks like prototype, care should be taken not to interfere with each other. Although I’ve tried to do the script as self contained as possible (i.e. without global variables etc.), it still hooks to some global events like window.onresize. If prototype is also depend on these, you might need to change fxHeader accordingly.
HTH
Jaimon
Jaimon:
Again thanks in advance for youe help. I’m a Data Architect converted into web development and javascript is not exactly my forte.
I tried to add some alerts to troubleshoot my issue and this is the piece of code in prototype that is causing the error on ie.
function extractScripts() {
var matchAll = new RegExp(Prototype.ScriptFragment, ‘img’),
matchOne = new RegExp(Prototype.ScriptFragment, ‘im’);
return (this.match(matchAll) || []).map(function(scriptTag) {
return (scriptTag.match(matchOne) || [”, ”])[1];
});
}
this.match(matchAll) returns proper data, but it seems like the issue is with the rest of the code, any idea?
Thanks a lot
Jaimon, I just wanted to let you know that I make it work on ie, the issue of course was that I wasn’t sending the width.
I was setting the width on my css, but it seems like the width is required on the declaration of the table itself.
Now is almost 100% working,I’m just missing the headers.
Thanks
Hi Juan,
In response to Ellary’s comment, I’ve actually updated my script to read width from CSS, if width isn’t specified in table’s width attribute.
Jaimon
Thank you, as I replied on a previous comment, I replaced the width 9999px to auto and that helped me out to show the headers
THANKS A LOT
I am using your script with an asp.GridView (Visual Studio 2008). The GridView, HeaderStyle and RowStyle all specify Width=”975px”. But The script is generating a width of 9999px. The GridView is in a table cell with a width of 998px and the table has a width of 1000px.
What could be causing this?
Hi Ellary,
Thanks for using the script. As I’ve mentioned in the post, for HTML table generated by frameworks like ASP.net, ADF Faces etc you might need to tweak the script a bit to make it work. I’ve also provided a sample ADF Faces page to demonstrate this.
Anyway, if you can send me the generated HTML page with very minimal data to reproduce the issue, I’ll certainly take a look..
Jaimon
Hi Ellary,
Like I’ve mentioned on my post, you’ll need to specify width in table’s width attribute and it should work. So from the HTML you’ve sent me, change the following line from
<table cellspacing=”0″ cellpadding=”0″ border=”0″ id=”GridDetail” style=”background-color:White;width:975px;border-collapse:collapse;”>
to
<table cellspacing=”0″ cellpadding=”0″ border=”0″ id=”GridDetail” style=”background-color:White;width:975px;border-collapse:collapse;” width=”975″>
HTH
Jaimon
I’m using Visual Studio 2008. My Gridview has a width specified but it gets generated in the style attribute. So I don’t know how I can generate a separate width attribute. In HTML 5 the width attribute is no longer available.
Perhaps your script can be tweaked to look in either place?
The new script works just fine.
Thank you.
Glad to hear that.. I’ve now updated the post to link to the new script files.
Jaimon
Hi! It’s a great job from you, many thanks! A few questions: it’s not working in IE8, just not showing the tbody; I would be gratefull if you can add a fixed footer functionality, too. Also, I can’t figure out how to add alternate background colors to the rows, especially with sorting added. I tried some scripts that just conflict with your. Sorry for my bad English, I am also a beginner in JS but have a static geographical site with too many big statistical tables, so this would be greatly welcomed to me! Thanks in advance!
How does your script handle column widths? Does it use those specified in the table or ignore them. If the table has no column widths specified, how does it size the columns?
Thanks.
Hi Ellary,
As you can see from the script, I’m using offsetWidth method to read the column width. Unless you use a fixed table layout (table-layout: fixed) browsers will recalculate the column width to adjust the data being displayed. This is regardless of whether or not a column width is specified. If no widths are specified, it is up to the browser to calculate column widths, and it does differ from browser to browser.
HTH
Jaimon
Hi, I have tried 2 or 3 different scripts for fix header with scrolling table. your script and technique work great with my enviroment. I am abled to adjust your code to have it work with ff and ie. I only have one problem. I try to center the table, then header will disappear. when I took the center alignment out, it work fine. Is there a way I can set the div center after scrolling table is set. Thank you.
Hi Henry,
As always, send me a very minimal HTML to reproduce this issue and I’ll take a look..
Jaimon
It works, your fix work great for both ie and ff.
Thank you.
Hi Jaimon,
Great appreciation to you for your work. If I could avoid having to deal with IE I would but alas, I cannot. IE-8 gives me the following error. Would you have an idea what might be the problem?
Thanks,
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Fri, 11 Jun 2010 19:45:08 UTC
Message: Invalid argument.
Line: 80
Char: 13
Code: 0
URI: http://katie.luther.edu/moodle-197/grade/report/LAEgrader/fxHeader_0.3.js
Message: Object doesn’t support this property or method
Line: 1334
Char: 9
Code: 0
URI: http://katie.luther.edu/moodle-197/grade/report/grader/index.php?id=2
Hi Bob,
Send me a minimal HTML file to reproduce the problem..
Jaimon
Hi Jaimon,
Thank you very much for this wonderfull script. It performs correctly and is very stable. I use this table to load dynamic rows which could vary is number from no data returned to maybe 35-40 rows – never goes above that number.
I am facing an issue in the HTML page wherein the height of the table keeps varying depending on the number of rows returned. Say for example, I set the table height at 450px in the HTML, then I call fxheaderInit(‘projectInfoTable’,650,1,0). The table that gets rendered on the screen, does not obey the height specified. Instead, it re-adjusts the height down to a lower value. This has the effect of making the GUI elements below this table to move up or down the screen. Is there some way of ensuring that the table DIV is fixed to the passed in height irrespective ?
Thanks.
Sorry, a small correction here. “Say for example, I set the table height at 650px in the HTML, then I call fxheaderInit(‘projectInfoTable’,650,1,0). “
Hi Ajay,
Thanks for using the script.. Table height adjustment as you’ve mentioned above is supposed to be a feature!. If you really want a fixed height box, then I would suggest using a div with fixed height around your table element.
Something like,
<div style=’height:650px;padding:0px;margin:0px;border:0px’>
…<table>….
…</table>
</div>
HTH
Jaimon
Hi Jaimon,
Thank you very much for this wonderfull script.
I am using fxHeader_0.3.js, In my html page, without using table width=”100%” , that time in IE script is not working properly, there its showing one error message like, ‘Please wait while loading the table..’. But the same time in Firefox it is working fine. So how can I fix this problem without using table width=”100%”. I have already send my minimum html file to your email address (mail@jaimon.co.uk), but I did not get any replay form you.
Hi Sree,
As I’ve mentioned on my post, you’ll need to specify a table width value for the script to work. And I’ve also have mentioned that any percentage width is calculated against the body offsetWidth and not of the parent container.
In your case, something like,
<table class=”data_table” id=”dataTable1″ width=”830″>
You’ll need to make a very small change in the source code to change the width after fixing headers. I’ve used Javascript module pattern wherever possible to make variables private. As the array storing the width attribute (tbl) is not accessible from outside code, you’ll need to change its scope, so that it can be accessible from toggleDiv function. (ie. change
var tbl=new Array();tothis.tbl=new Array();)You’ll also need to change your toggleDiv method to set the width explicitly,
Something like,
if(document.getElementById('right_pannel').style.display == "block") {tbl[0].swidth='986';
//rest of your existing code
}else {
tbl[0].swidth='830';
//rest of your existing code
}
HTH
Jaimon
Hi Jaimon,
Thanks for your helpful reply, I have one another doubt, if I need to use two table in a perticular html page, that time how I will set the width?
Hi Sree,
Like I said,
tblis an array, so use tbl[0].swidth for the first table and tbl[1].swidth for the second table.HTH
Jaimon
Hi Jaimon,
I made several posts that I no longer see. Did I inadvertently delete them? Let me know.
I have been spending far more time getting fixed headers working and your solution works great for IE8 and is close for IE7 and FF3.
The key points of my post are I am using VS2005, ASP.net and VB.net utilizing a GridView. As far as I can tell there are no name collisions. The grid control code is:
GridView ID=”TimeGridView” runat=”server” AllowSorting=”False” AutoGenerateColumns=”False” Height=”315px” Width=”935px” saveButtonID=”SaveButton” ShowHeader=”True” DataKeyNames=”EmployeeNo,Name,Company Code,Location,PayGroup,PayDate” OnDataBound=”TimeGridViewDataBound” DataSourceID=”SqlDataSourceTimeGridView” OnRowDataBound=”TimeGridViewRowDataBound” OnRowUpdating=”TimeGridViewUpdating” OnRowUpdated=”TimeGridViewUpdated” ShowFooter=”true” BorderColor=”#E7E7FF” BorderStyle=”None” BorderWidth=”1px” CellPadding=”3″ GridLines=”Horizontal”
HeaderStyle BackColor=”#E7E7FF” ForeColor=”#4A3C8C” Font-Bold=”True”
FooterStyle BackColor=”White” ForeColor=”CadetBlue” Font-Bold=”True”
RowStyle BackColor=”#E7E7FF” ForeColor=”#4A3C8C”
PagerStyle BackColor=”#E7E7FF” ForeColor=”#4A3C8C” HorizontalAlign=”Right”
SelectedRowStyle BackColor=”#738A9C” ForeColor=”#F7F7F7″ Font-Bold=”True”
AlternatingRowStyle BackColor=”PowderBlue”
/GridView
The invokation of the script right before the /body tag in a script tag is as follows:
fxheaderInit(“TimeGridView”,315,1,1);
fxheader();
The specific problems are:
1) IE7 the header literals are hidden. In the view source the th tags are present, but the header area shows just the background color.
2) In FF3.0.16 and 3.6.6 the first column is fixed; however, the remaining columns show below the last data row.
Thanks,
David
Hi David,
Your posts weren’t lost, its just that, I need to aprove them for to appear here.
Regarding the issue, send me a very minimal HTML file to reproduce your issue and I’ll take a look..
HTH
Jaimon
Jaimon,
Thanks for looking into this for me. Below is the html code that is failing with IE 7. I will tackle FF 3.6.6 later. I apoligize for the length of the post, but I did cut the post down from 64K to 32K…
Employee Time Sheet
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName==”Netscape”)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function warnUser()
{
if (confirm(“There has been no activity for some time.\nClick ‘OK’ if you wish to continue your session, \nor click ‘Cancel’ to log out.\nFor your security if you are unable to respond to this message\nwithin 2 minutes you will be logged out automatically.”))
{
// pos the page to itself
document.location.href = ‘TimeGrid.aspx’;
}
else
{
document.location.href = ‘TimeSessionTimeout.aspx’;
}
}
NameRegularOvertimeVacationBonusBereavement_05
George, King *****
Eliz, Queen *****
Henry, Prince*****
Charles, Prince *****
Diana, Lady*****
Albert, Hall *****
Tower, London *****
Thames, River *****
Buckingham, Palace*****
TOTALS0.00000.00000.00000.00000.0000
 
//
fxheaderInit(“TimeGridView”,315,1,1);
fxheader();
Thanks,
David
Jaimon,
I saw my last post above, but I noticed all the html was gone. Do you see it? If not, is there a “trick” to post html to your blog?
Thanks,
David
Hi David,
Send the HTML to my email id – mail at jaimon.co.uk
Jaimon
Hi Jaimon,
This is best script I’v found to create fixed headers on html-tables. For my specific situation is misses 2 important features, the first being able to have a dynamic height and the second that the width of a ‘100% width grid’ is calculated on the body and not on the parent of the table.
The last issue I’ve fixed by adding an offsetWidth that is subtracted from the body offsetWidth, in that way I can compensate for paddings and margins of parent elements.
Changed source:
(function() {
…
function gbw(wOffset) {
return document.body.offsetWidth ? document.body.offsetWidth – wOffset : window.innerWidth – wOffset;
}
…
this.fxheader = function() {
…
for (var i = 0; i = 0) {
…
w = (gbw(tbl[i].wOffset) * twi / 100);
…
}
…
}
…
}
this.fxheaderInit = function(_tid, _sheight, _noOfRows, _noOfCols, _wOffset) {
…
tb.wOffset = _wOffset || 0;
…
};
})();
If you want I can email the code changes also.
Do you have any plans to add more features or make new release with features others like myself are adding?
Regards,
Jochen
Hi Jaimon,
It works reasonably well… vertical scrolling works,
horizontal scrolling works, only the column headers are slightly off versus the rest of the table – i.e. the header columns have different sizes versus the data columns… I took a look at your js code but could not find any obvious errors, it might be a subtle problem. The vertical alignment is perfect.
This bug shows up in Internet Explorer 8 & Firefox 2 (which are the only two browsers I have tested)
Hi Alex,
Can you change the fixed width I’m offsetting against table cell paddings/borders in fxHeader source file? (In line 119 and 123 in fxHeader_0.3.js)
I’ve just changed that to 10, and that works for the example you’ve sent me. Give it a try.. May be I should take this value as a parameter on fxHeaderInit.
HTH
Jaimon
Works with these changes… thanks!
Jaimon,
Nice work – very useful. Is there a way to suppress the horizontal scroll-bar? The horizontal scroll-bar always appears, even though I don’t need it. Vertical scrolling is all that I need. Thx
Hi Stan,
Do you get horizontal scroll bars on my example page as well? If not, as mentioned in some of the previous comments, please try setting the DOCTYPE to xhtml.
HTH
Jaimon
Jaimon, Good post, new to javascript, how do I implement this line in your example” Call fxheaderInit for every table you want to add scrolling. fxheader() is only required to call once.
thanks
Hi Terry,
Please see the source for the demo I’ve provided (http://blog.jaimon.co.uk/datascroller/fxHeader_0.3.html) for a working example.
HTH
Jaimon
Hi Jaimon,
I was looking @ the samples & implementation. These are very helpful & the I must say the solution is fantastic. The only issue I have is the form elements. My ASPX page is like, I have dropdowns (with AutoPostBack set to true) in the header in both the fixed header & the scrollable header. When I change the values the dropdowns, the page gets reloaded & re-query the DB then display the appropriate results in the table. When I place the dropdowns & change the values, the page reloads & I get the desired results in the table (this is all .NET & I have handled it). BUt the selection is lost in the dropdowns. I understand cloning needs to be done for these dropdowns. But I’m new to javascript & was not able to do it. I did go thru the link https://jaimonmathew.wordpress.com/2010/02/02/scroller/ that has the info on ADF faces, but was nto able to do it.
Can you plz help me do this? I really need this & I have a demo in a couple of days.
Thanks
Bobbie
hi Jaimon
I would really appreciate if you could advice me in adding two scrollable tables with fixed headers using ADF or Trinidad tables.
rite now the tables overlap or the second table wont have a header.
thanks
Hi Bobbie,
This happens as the user see/change the cloned drop down box and the orginal box’s value remain unchanged.
A quick fix will be to add an onchange even handler to the cloned drop down box to set the original box’s value, and call any onchange event it may have.
HTH
Jaimon
Hi Jaimon,
I haven’t succeeded in making it work on a content page embedded on a master page in ASP.NET. I have the exact same code working on an ordinairy aspx. Have you encountered this before?
Thanks
I worked with Jaimon to get version 0.4 created to improve the LAEgrader plug-in for Moodle (http://moodle.org/mod/data/view.php?d=13&rid=4026). With his help we removed the vertical scrolling, so that we could just freeze the first 3 columns. Take a look at the example I have (http://courses.alma.edu/LAEgraderSample.php).
I used: fxheaderInit(‘user-grades’,9999,0,1);fxheader();
Another note, because my table was full of text input fields, I added the following to the fxHeader_0.4.js file to fix issues with form submission and tabbing between fields. Inserted at Line 25:
var inputs = cf.getElementsByTagName(‘input’);
for (var i = 0; i < inputs.length; i++) {
inputs[i].tabIndex = null;
inputs[i].name = null;
inputs[i].disabled = true;
}
Thank you for all your help Jaimon!
Sincerely,
Larry C. Elliott
Assistant Director
Web Development and Network Security
Alma College Information Technology
Hi Jaimon,
Forgot to mention the below in my previous post:
1. On a content page all controls get a prefix on the clientid (but the functions are called with the right clientid’s of course).
2. Since there are no body tag in the aspx content page, I have tried to put the calls to fxheaderInit() and fxheader() both a)in the content page itself, b) before the body tag in the master, and c) executed by a button click after the page has loaded.
But no luck so far.
Regards / Petter
hi
great script..
1 small request.could you be able to provide us with a script to freeze header and footer both and scrollable body?
Jaimon,
The demo page you provide works for IE8, Chrome and Firefox. However after a resize of the window the column headings in the tables with the fixed columns are off in Chrome and Firefox (latest versions of both).
Hi Dan,
Please try the new version (v0.6)
HTH
Jaimon
Hi Jaimon,
I am using Version 5 script. Its Working in IE8
I’m getting the following script errors in IE7 and IE8(Compatibility View).
I’m also getting a double header
Line 127
Error Invalid Argument
c[q].style.width=c2[q].style.width=(oc[q].offsetWidth-3) + ‘px’;
Thanks
Udhay.
Hi Udhay,
As always, send me a very minimal reproducible HTML file, and I’ll take a look.
Jaimon
Hi Udhay,
The issue here is, when the script runs, table’s width is not populated. If you move the call to fxheader further down the line, (after the form end tag) it will work. Ideally scripts like this should only get called once the document ready event is fired.
HTH
Jaimon
Hi Jaimon,
Great jaimon.. Its working now.. Thanks
Thanks
Udhay
HI Jaimon,
The impl is cool & efficient. I have an issue wherein I was not able to retain the dropdown selections after I do a form post. I looked @ you response to comment # 36. Can you plz give an example implementation for this? I tried all I could to do this. I’m a newbie to javascript.
My requirement is that I have dropdowns in the table th tags & they have an onChange event associated with them. So if the value changes, the page reloads & the selected value has to be retained. Plz help me doing this.
Thanks
Prasad
Hi !
Thank you very much for your script ! I work with very long table and you save my life. 😉
Your idea to clone the table is very smart.
On my web page, i would like to use anchor to reach specified lines in the table. But the classical link doesn’t work : its bring me to the good line… but on the fixed div ! !
Is there a trick to use anchor in the scroll div ?
Thanks for help, and many many thanks for your great work 🙂
Hi,
I have an issue regarding memory leaks. I have implemented the script on a table put inside an ajax update panel. The content of the table is generated from code behind. The fxheaderinit and fxheader functions are called from the PageRequestManager’s endrequest. I have tried to unwire the table objects client functions, and to clear the table by setting the innerhtml. But no luck. Do you have any experiance regarding this kind of implementation of your scripts. I have done my tests in Chrome.
//Petter
Hi Jaimon,
I got a problem with this scrollable table.
Sample table
Group Name | Rank
White_1 | 4
Black_1 | 2
White_2 | 5
Red_1 | 10
Let say I have 20 rows of data. When I do a search for “White” using ctrl+f in IE8. As expected, it highlights few words in few rows, however, my fixed header turn to one of the highlighted row. When I close the search bar/function, the fixed header still display my data row instead of the proper header.
Hi,
It is a known issue and happens in IE and Google Chrome. Firefox seems to handle this without any problem. As it stands, I don’t know of any work around on this.
Thanks
Jaimon
Hello! I have one question about your plugin. How can I easily change the width of the table? It is easy to change the height, but I need the different widths depends on the situation.
Hi,
Width is extracted from the table’s width attribute, or if one doesn’t exists, from the style.width attribute. So as long as you set the width correctly on your tables, it should work.
HTH
Jaimon
Thank you very much!I have found the mistake!
Thank you so much for this fantastic solution!!!
Great script, one question/issue though: The width of the first column of the frozen header is about 1-2px narrower than the first column of the scrollable portion of the table. All the other columns do line up. It’s not a huge problem, more of a cosmetic eyesore. I’ve tried making small adjustments here and there, but nothing is making the first column width match. I’d be happy to send a screen shot if the description isn’t good enough. thanks!
Hi Tony,
Are you using the correct DOCTYPE?
Jaimon
I tried changing Strict to Transitional, but that didn’t change anything. I also tried the table in FF4 and the header width seems to span the table data + the vertical scroller.
Here’s my doctype:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
html xmlns=”http://www.w3.org/1999/xhtml”
Hi Tony,
Send me a very small test file to reproduce this and I’ll take a look when I get a chance..
Thanks
Jaimon
great script but i have one issue. I’m trying to set focus to one of the cells in the table using an onload command in the but ie gives me an error “object doesn’t support this property or method”. is there a way around this?
thanks
Hi Adam, because the script does a bit of rewriting, your original component may not be the one you see on the page. Use firebug, IE developer tool etc. find the component’s id and then use the new id to set focus to.
HTH
Jaimon
Hi Jaimon,
its really a nice solution for project on which its really become hard to accomodate some kind javascript framework.
i had adopted your suggested solution in our project.
but after applying the script , as per my requirement also i want to fixed one of the table column for horizontal scrolling.
i had done that but in IE7 its creating some problem on the style of the fixed column header. its shows little bit clutter image.
can you guide me what can be the issue ?
Thanks
Nirav Joshi
Hi Jaimon, great utility here, and working very well to show an excel spreadsheet in a table format. I have one small issue with IE9 where displaying more than 90 rows causes a weird “flickering” of content below the table when hovering over the bottom half of the table. This flickering causes content to push down farther on the page, but only for a split secon. The content below has buttons to continue on during a setup process, so this makes usability a little difficult. This only happens in IE9, not IE9 Compatiblity or other IE 9 browser modes. Trying to find out more information about IE9 related issues. Thanks for any feedback.
I have screenshots to illustrate this IE9 issue better, but not show how to upload them…
This is great plugin. Can you suggest how can I set the scrollable to the end of table? Thanks!!!
Love the scripts but have a question. I have a textbox in the header (for filtering on name) and for some reason on postback the contents of the text box get suffixed with ‘,,,’ (3 commas) and obviously my filter will not work as expected (few names end with 3 commas….;-)
Any ideas?
Hi Garth,
As the script will be cloning the contents, you will end up with two input boxes with the same ID, although one of them will be hidden from view. And I think that could be causing this weird issue. What you see on the page is the object created by the script, and not the original object rendered by the browser. What you could do is change the ID after cloning each row (ADF Faces code on my previous post has some examples) and then either use the new ID on server side to retrieve this, or copy the value to the original text box before submitting, so no change at server side.
HTH
Jaimon
Hey there! Thank you very much for this walkthrough, it’s been very useful for my html pages. I’m wondering though, if I can incorporate it with a javascript that sorts by table headers, something like http://www.kryogenix.org/code/browser/sorttable/
I’m tried incorporating both javascripts, but it seems your script disables the sortable headers. Any thoughts?
Hi,
As fxHeader script creates another table with the header rows, it won’t possible to use a generic script such as Stuart Langridge’s sortable without some modifications. There is a difference in loading strategy as well in our scripts. Because we end up with two tables, we need to add the header links for sorting in one table, and on clicking we should be sorting data from another table.
Thanks
Jaimon
is that something you can invision incorporating rather easily? i’m afraid that sort of modification goes beyond me. 😦
I believe it shouldn’t take more than a couple of hours to do it for any experienced JS programmer and some cross browser testing..
Jaimon:
I’m having issues with the first row of data disappearing and the column freeze not set properly when in IE8 Standards mode.
Also when in IE7 standards /Compatability mode, there is a small offset between the first unfrozen column and the last frozen column.
I will send you a sample by email.
Thanks again!
Garth
Thanks again for your help with the scripts!
Because my first row had cells with a rowspan >1 we changed line 131 to read:
tHeight+=tbDiv.rows[j].cells[0].offsetHeight;
so it would just use the first cell (which did not have a rowspan).
Since I have a dynamic number of header rows I wanted to freeze (anywhere from 5 to 12 depending on the dataset), and some of those rows may have varying colspans we also changed line 142 as follows:
cw += tbDiv.rows[tbl[i].noOfRows+1].cells[j].offsetWidth;
so that the first line of “data” would be used to determine where to start the column freezing. (note this was only an issue in IE8 Standards mode).
Thanks again!
Hello,
Brilliant script. Thanks.
I have a pagination (infinite) script that works on one of my projects. As soon as the bottom of the div is reached the script loads more content.
I am not sure how to determine when the bottom of the script is reached with your div. Can you assist?
Regards,
Clayton
Hello,
the script is great. After trying out several methods – this finally worked! But I do have a couple issues.
1. I have hidden rows longer in width than original rows. When I click Edit on the original rows in the table, the hidden rows appear and the header doesnt adjust. So several columns have no header now.
2. this script, for some reason, blocks my sorting function.
I would greatly appreciate your help/suggestions.
Thanks,
Nea
Hello,
The script works perfectly in my application. I would like to make the scroll bar on the page not visible to the user. How do I go about it in the script?
Hello Jaimon,
i’m using the ‘fxHeader_0.6.min.js’. Firstly congratulations for the job !
If you can, i would like a help here:
How to increase the width of the first column of the table (‘scroller:fxCH’ and ‘scroller:fxCB’) in IE ?
In firefox, this inline CSS in works:
‘width:250px; display:block;’
Sorry for the Google Translator english
Thiago Sathler
Rio de Janeiro – Brasil
Hi Thiago,
Can you try to add any element with 250px width to the first column? Something like a 1px high div element with no borders?
Jaimon
Hello,
first I used the fxHeader2.js and I was very glad to find an script that worked in my grails application. But with IE9 I have two problems:
1. I have a table with 10 columns and on changing positions I have the effect that a cell is omitted. The remaining cells are shifted to the right so that there is an additional column at the end of the row. The HTML-code looks fine and with Firefox it works fine, too.
2. Then I tried the fxHeader_0.6.js. The problem remained and now the scrollbar is not connected to the table but extremly outside of the view, although I use a fixed width=”600″ at the table.
What could be causing this?
Thanks, Karen
Question:
I have a table that includes a column of checkboxes (all dynamically generated) that is inside the scroll container. The idea is that the user selects 1..n rows via the check boxes and then clicks a button to continue. The button simply fires some javascript to toggle the display of a different div which is outside the scroll container.
The problem I get is that when the javascript fires it de-selects all my checkboxes. BTW this is only an issue when the javascript being run changes the display of the div (either by className or by changing the style.display attribute of the div). If I run a simple alert in the javascript, then there is no change in the checkbox state.
Any thoughts?
[…] <SCRIPT LANGUAGE='JavaScript'> /* * @Author Jaimon Mathew http://www.jaimon.co.uk * Please see jaimonmathew.wordpress.com/2010/03/19/making-scrollable-tables-with-fixed-headers-updated-2/ */ (function() { var flag=false; var tbl=new Array(); this.ge$ =function(d) {return […]
Pingback by Proxy Servers » Spans jumping around on resize and/or zoom | August 5, 2012 |
Hi Jaimon, thanks so much buddy.
It works like a charm in IE8 and FF14.
Jaimon, I have a question to ask you sir.
For example, row is my table’s id. So I call:
fxheaderInit(‘row’,150,1,0);
Now, I need to use jQuery to call function scrollingTop() to force the scrollbar go down to the position I need.
I tried to call id of the div container of the fixed header table but I didn’t succeed.
If I remove the following code above (not fixed header), it works (scrollbar jump to the position I want)
Please let me know how can I keep fixed header and still manage to control the scrollbar?
Thanks so much Jaimon and other friends.
Best regards,
Khanh Tran
Hi jaimon, need your help. I was using the old fxheader1.js. I have a specific requirement like the vertical scrollbar will only appear if the table row data is overflowing the page height. But if all the table rows can be rendered within the page height then i dont want to show the scrollbar.
fxheaderInit(‘dataTable’,300); //basically dont want to pass this height.
can you help?
Hi,
You could change the script to calculate the height rather than using a hard coded value.
On my first post auto height setting is used on the ADF example.
Check adjustHeight method in fxheader.js (from http://jaimonblog.appspot.com/datascroller/ADF10gScroller.zip)
HTH
Jaimon
Hi Jaimon – I’ve been trying to get your script to work but for the life of me can’t get the cell widths of the header to line up with body of the table (nor the fixed first column). I’ve tried explicitly setting the width of each head and table cell (and set table-layout to fixed) and the script over-rides the values. I’ve tried not setting any of the widths, figuring that the script would figure out the correct widths based on the widest cell in a table, but the header has equally-sized cells that don’t match up with the variously sized body cells. It seems that the fixed header cell widths are set completely independently of the body cell widths despite what I see in the demos. I don’t understand the script well enough to understand how your widths are set but I’m hoping you can shed some light on this issue so I can track down the source of problems. Thanks so much!
What DOCTYPE are you using? If it’s HTML or no doctype defined, can you try it with an XHTML one?
Thanks so much for the follow-up Jaimon! The doctype was plain HTML. I tried an XHML declaration but it made no apparent difference. Just to help me eliminate some variations, does your script care whether the cell sizes are defined (either in the element or css), or whether table-layout is set to fixed? Is the script suppose to determine the width of the header cells based on the widest cell in that column? Thanks again!
Send me a small sample to recreate the issue, and I’ll take a look.
I could send you a copy of the rendered html but I could not find any contact email address on your site or in the email I received. Perhaps send me a direct email with your contact info. Cheers – L
Excellent code. I’m running it with an HTML5 doctype on FF4 and IE8 with only minor problems.
Thank you for developing it, it saved me a ton of headaches.
(hopefully the world doesn’t end today because I just got it working perfectly….)
Hi Jaimon,
I have an issue while using the plugin in asp.net grid view with edit template. On the initial grid bind the plugin is working properly, but we try to edit any records after the post-back occurred the js stopped working with an exception “Object required on line no 41”. I added the method calls in Page_PreRender still have same issue. Please help me to sort it out.
Hi,
Can you please add code for freezing the footer of the table
body, .mt {padding:0px;font-family: Tahoma, sans-serif;font-size: 0.9em;}
body {margin:5px;}
p {margin:30px 0px 30px 0px;}
table.mt {border-width: 1px;border-spacing:0px ;border:1px solid #6EC0E6;;border-collapse: collapse;}
table.mt th {text-align:center;
height:60px; border:1px solid #3D85B4; background-color:#30AFEA;}
table.mt td {border-left:1px solid #6EC0E6;text-align: center;
height:45px;}
table.mt tr{background-color:#E5F2F8; text-align:center; width:200px}
table.mt tr:nth-child(even){background:#FFFFFF};
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
Column 10
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
fxheaderInit(‘dataTable2’,200,0,1);
fxheader();
Hi,
I’m declaring the table like this:
However, on the following line in the fxheader() function:
var r = tbDiv.rows[j].cloneNode(true);
I’m getting the following error:
Unable to get property ‘cloneNode’ of undefined or null reference
Thanks,
Mark
Hi, is it possible to easily toggle between scrollable view and normal view. I would like to be able to view a large table without scrolling if I want to. Default is should me shown with scrollbars.
Thanks,
Sander
Dear Jaimon,
Your fxHeader works beautifully. But I am new to Javascript Objects and have a following problem:
Instead of the block: …………… ,
I created a string var TABL with this content.
How to pass this variable to fxHeader?
Your script is:
this.fxheaderInit = function(_tid,_sheight,_noOfRows,_noOfCols) {
var tb = new Object();
var td=ge$(_tid);
tb.tid=_tid;
tb.sheight=_sheight;
tb.swidth=td.width;
So, how can I change your script from var td=ge$(_tid), to read my string var TABL?
Thanks
Krzysztof E Wojciechowicz
Sorry, the line — Instead of the block —- was lost in my comment…….
Your fxHeader works beautifully. But I am new to Javascript Objects and have a following problem:
Instead of the block: …………… ,
I created a string var TABL with this content.
How to pass this variable to fxHeader?
Your script is:
this.fxheaderInit = function(_tid,_sheight,_noOfRows,_noOfCols) {
var tb = new Object();
var td=ge$(_tid);
tb.tid=_tid;
tb.sheight=_sheight;
tb.swidth=td.width;
So, how can I change your script from var td=ge$(_tid), to read my string var TABL?
Thanks
Krzysztof E Wojciechowicz
my email: krzysztofw@mweb.co.za
I don’t know what happens. My sentence referring to – Instead of the block – was stripped of words: Table id=….. close Table.
Krzysztof
hi jaimon
i want to create a table with fixed header and fixed footer the rows are getting added dynamically ,i have done several search for this but i did not got any proper output as required the columns width shoud match or align with header and footer width.
can you please help me for the same as i am using bootstrap3.
I still can’t get this to work correctly in any browser, though your own examples work correctly for me!
You can see what I mean here: http://quizleagueoflondon.co.uk/results/2014/TestScrollTable.htm
Thanks very much for the script!! fantastic! I’ve searched the whole web to find that one.
I just have one question, Can I define a minimum width for my table. If it gets smaller than that number (px) it show the scrollbar?
Thanks!!
I just wanted to let you know that I have written code that is based on this blog entry. This has been a great addition to my toolkit, and a wonderful educational piece in jquery.
Thank you.
It should be working now
To adjust the width of the columns to restrict the page needed to replace a field.
this.fxheaderInit = function(_tid,_sheight,_swidth,_noOfRows,_noOfCols) {
tb.swidth=_swidth;
// tb.swidth=td.width;
set on jsp files
onload=”fxheaderInit(‘dataTable’, 500, 1300, 1,0);fxheader();”
Thank you
Riccardo
Dear Jaimon,
first of all great work. First solution I really like and is easy to use. Great work!
I have a tiny question. Is it possible to scroll the table to some position on load of the page?
It would help me greatly.