We help IT Professionals succeed at work.

Non-Scrolling Table Headers

bgernon
bgernon asked
on
Medium Priority
1,401 Views
Last Modified: 2008-02-26
Re: eiribur's question concerning always visible headers.  While seanpowell's answer is good, my problem is slightly different.  I need to be able to scroll horizontially as well as vertically.  When scrolling side-to-side, I need the headers to move with the columns.  When scrolling up-and-down, the headers need to stay in place.  

My table is a rather large table, constructed with ASP vbscript.  I tried using expressions in my CSS:
DIV#Tbl-container {
  width:755px;
  height:400px;
  overflow:auto;
}  
THEAD th{
    Top:expression(document.getElementById("Tbl-container").scrollTop);
    z-index:20;

It works, except  it does not scroll smoothly.  It is jerky, with slight delays in the actual scrolling.  The larger the table, the longer the delays.  Any ideas for a better solution?

Beatrice
Comment
Watch Question

Top Expert 2004

Commented:
Do you mean something like this:

http://www.pdgmedia.com/ee/scrolling1.html

If yes, then give me a minute to clean up the code. There's a lot of old non-standard rubbish in it...

Thanks,
Sean

Author

Commented:
Yes!  Yes!  Nice touch with the non-scrolling left column.  I also had that going in the above mentioned table, but with the same problem.  I had used:

    Left:expression(document.getElementById("Tbl-container").scrollLeft);

I took a peek at your code.  Looks like you use Javascript.  I know just enough javascript to get by, but am no expert.  So, your comments about what is going on in the code would be appreciated.  Looking forward to viewing your cleaned up code.

Thank you,
Beatrice
Top Expert 2004
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Thanks Sean.  I will study it carefully and play with it.  I will let you know if I have any questions.

Sean, I am hoping to take this table one level further.   Currently, viewers can sort the table in different ways.  However, each time they select a different sort, the page is reloaded from the server.  For this large table, there is almost a 15 second delay each time, while the page reloads.  I think I have seen it done with JavaScript...some way to capture the table data in an array and not have to return to the server everytime with an updated SQL "order by" statement.  Is this your area of expertise also, or should I post this in another area?

Thanks for all your help.  I will be getting back to you later.

Beatrice
Top Expert 2004

Commented:
Alas - no, that is not my area of expertise (but i'm working on it...)
The two options I can think of would be either a js array, or using the sort() methods of the DOM, which would likely be a better way to handle it.

One of the other top experts here - COBOLdinosaur - is a wiz in both areas, so I'll try and get his attention and bring him into the discussion... for both our sakes...:-)

Thanks,
Sean

Author

Commented:
Thanks again.

Beatrice
Top Expert 2013

Commented:
Well i was looking for you anyway Sean.  I wanted to congratulate you and your new EE certification in Web Development... a tough TA to get certified in.

I'll take a look at the sort shortly.

Cd&

Commented:
I know you can use Data Binding to do a sort like that, I haven't done it in ages, and couldn't find any really good examples, but here is one...


http://home.att.net/~online_tools/workingon4.html
Top Expert 2013

Commented:
Javascript sort spec is here if you want to play with the options:

http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/array.html#1196882

For a basic sort on columns you put an on click event on the th tag:
<th onclick="dosort(this.cellIndex,'tableid')">
Then you use an array and the sort method of the array object

function dosort(idx,tabl)
{
   var pntrs= new Array();
   var arrx=0;
   tab=document.getElementById(tabl);
   for (i=0;I<tab.rows.length;i++)
   /* note row zero is the headings so we leave it out */
   {
      pntrs[arrx]=tab.rows[i].childNodes[idx].nodeValue+'|'+i;
   /* the index is appended to the end to preserve its original position
      which will be important in the next step */
      arrx++;
   }
   saveNodes= new Array();
   pntrs.sort();
   var cellcnt=tab.rows[0].childNodes.length;
   /* can save the rows in the sorted order */
   for (i=0;i<pntrs.length;i++)
   {
      x=pntrs[i].split("|");
      y=parseInt(x[1]);
      for (j=0;j<cellcnt;j++)
      {
          saveNodes[i*cellcnt+j]=tab.rows[y].childNodes[j].innerHTML;
      }
   }
   arrx=0;
   /* now we can slam it back into the table */
   for (i=1;i<tab.rows.length;i++)
   {
      for (j=0;j<cellcnt;j++)
      {
         tab.rows[i].childNodes[j].innerHTML=saveNodes[arrx];
         arrx++;
      }
   }
}
//-->
</script>

to work correctly you have to make sure there are no whitespace text nodes beteen the cells
so keep the start and end tags on the same line:
<tr>
<td>some stuff</td>
<td>some more stuff</td>
</tr>

will have problems but
<tr><td>some stuff</td><td>
some more stuff</td></tr>

Will have the right number of nodes

Cd&
Top Expert 2013

Commented:
I haven't done one of those in a while, and did not have time to set a table to play with it, so it may still have typos, and  it is probably not real fast for a large table.

Let me know how you do.

Cd&

Author

Commented:
Wow! You guys are all great.  I will study all the possible solutions presented.  CD&, it is probably faster than the way I am currently handling the sort.  I'm glad you mentioned putting the click event on the th tag. That is a great feature I have been wanting to play with, but haven't found the time.  Currently, users select the sort desired from a drop-down list box.

Beatrice
Top Expert 2004

Commented:
Hmmm... something tells me we're going to have a problem because it's actually two separate tables...

But I could be wrong. I'm new at this DOM thing but I've been studying hard :-)
Top Expert 2013

Commented:
Sean,

Forgot is was two tables, but it should still work.  The click passes the name of the table as one of the arguments so the core data still sorts.

This (had a typo any way):
 for (i=0;I<tab.rows.length;i++)
   /* note row zero is the headings so we leave it out */

Just becomes the more normal:
for (i=0;i<tab.rows.length;i++)

The left table just needs to be saved to another array, and wee include population of those cells with the nodes in the primary table.  The only thing we could not handle without major surgery is sorting on the left column.

Cd&

 
Top Expert 2013

Commented:
Of course given past history there are probably still undetected typos anyway. :^(

Cd&
Top Expert 2004

Commented:
Hi bgernon,

Just want to see how you're making out. I think the first question was answered, but not sure about the second (Currently, viewers can sort the table in different ways)

Thanks,
Sean

Author

Commented:
Sean,

I got the first part working late Friday.  I was going to send in a comment today.  

I ended up combining your method with another I found on EE:

   https://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20905902.html

I wanted the column data or headers to dictate the column width.  So I needed the headers and data to be in the same table.  I used style="position:relative;top:expression(this.offsetParent.scrollTop);" in my <tr> for the headers.  Then, because I now had only two tables (one for the left column data, in my case SSN's, and the other with headers and data), I modified the javascript to one addScrollSynchronization statement:

 addScrollSynchronization(document.getElementById("div1"), document.getElementById("div2"), "vertical");

Works beautifully!  Today I plan to tackle the sorting piece.

Beatrice
Top Expert 2004

Commented:
That's great Beatrice - I'm glad you're making progress.

Perhaps it would be a good idea to open a secondary question with regards to the sorting, and we can carry along with you there. Cd& to perform the magic, and I'll sit in the front row.

Seriously, it help future EE users when searching for similar questions on sorting. They may not think to look in this thread given it's title :-)

Thanks,
Sean

Author

Commented:
My avaiable points are low right now.  I will work with CD&'s suggestion and others I have found.  If I find I am having problems, I will put it up in the proper section, JavaScript.  I am a little confused about how to award points in this situation, because I had two things going.  Your thoughts?
Top Expert 2004

Commented:
My preference would be 2 separate questions, since we're dealing with two different issues here. This question is good for users trying to look at different ways of scrolling table data. A second question (How to sort table data), for instance, would be beneficial for the sake of EE's database.

My suggestion would be for me to reduce the points on this Q to 225, and and then you can accept it as you wish. Then open another Q for 225 with the correct title and Cd& can post there.

Let me know if that sounds okay :-)
Top Expert 2004

Commented:
Thanks bgernon,
Let me know if you want to ask another Q for your data sorting issue, okay? I'm happy to reduce the points on this one to allow for that.

Thanks,
Sean

Author

Commented:
Thank you.  I may have you do that.  I was reading again the comments CD& made about the code maybe requiring major surgery if I want to sort on the left column.  Well, guess what?  I do need to sort on the left column.

My morning has been crazy, so I have yet to sit down and study the sort stuff.  I want to carefully compose my question to include the fact that I have non-scrolling headers and a non-scrolling left column.

Thanks again for your help.

Beatrice

Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.