S7U.Blogspot.com: Dynamic Fixed Header Footer using Javascript

Thanks to developer who created initial version of scrollable table using JavaScript and shared with everyone on http://www.webtoolkit.info/. It was not working in Chrome, Safari and Opera, so just modified the script to work in all browsers.

Also added dynamic height to it.

How to use this script?

As mentioned in webtoolkit.info you just need to enter table id.

<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 40);
</script>

Here you need to mention height in percentage. something like 40 for 40% of screen height

How table should be structured:

Table should have thead which will be present at the top of the table.
Table should have tbody which will be scrollable.
Table can have tfoot its optional.

var bodyHeight = this.tbody.clientHeight;
   var trs = this.tbody.getElementsByTagName('tr');
   if (bodyHeight >= (this.newHeight - (headHeight + footHeight))) {
     this.tbody.style.overflow = 'scroll';
   } 
   else {
  this.tbody.style.overflow = 'auto';
   }
   /*
    Chrome is built on Mozilla. Some script to assign width for tables dynamically.
   */
 var isChrome = (navigator.userAgent.toUpperCase().indexOf('MOZILLA')> -1 || navigator.userAgent.toUpperCase().indexOf('OPERA')> -1);

if(isChrome){ 
    this.thead.style.display ="inline-block"; 
    this.tfoot.style.display ="inline-block"; 
    this.tbody.style.display ="inline-block";
    this.tbody.style.overflow ="auto";

var count = trs[0].getElementsByTagName('th').length || trs[0].getElementsByTagName('td').length;
    var colArray = new Array(count);

/*Thead*/
    trs = this.tableEl.getElementsByTagName('tr');
    for(var i=0; i < trs.length ; i++ ){
     var cols = trs[i].getElementsByTagName('th') || trs[i].getElementsByTagName('td');
     for(var j=0; j < cols.length ; j++){
      if(colArray[j]==null || colArray[j] < cols[j].clientWidth){
       colArray[j] =cols[j].clientWidth;
      }
     }   
    }

var sumArray=0;
    for(i =0; i < colArray.length; i++){
     sumArray += colArray[i]; 
    }

/* if the width of any cell is greater */
    if (sumArray < (this.newWidth - this.scrollWidth)){
     var newCount =0;
     var nWidth =0;
     for(i =0; i < colArray.length; i++){
      var wid = (this.newWidth - this.scrollWidth)/count;
      if(wid < colArray[i]){
       newCount++;
       nWidth += colArray[i];
      }
     }
     var newWid = ((this.newWidth - this.scrollWidth) - nWidth)/(count-newCount);
     for(i =0; i < colArray.length; i++){
      var wid = (this.newWidth - this.scrollWidth)/count;
      if(wid >= colArray[i]){
       colArray[i]= newWid;
      }
     }
    }
   
    /*Thead */
    trs = this.thead.getElementsByTagName('tr');
    for(var i=0; i < trs.length ; i++ ){
     var cols = trs[i].getElementsByTagName('th')||trs[i].getElementsByTagName('td');
     for(var j=0; j < cols.length ; j++){
      cols[j].style.width = colArray[j] + 'px';
     }   
     var tcell1 = trs[i].insertCell(cols.length); 
     tcell1.setAttribute("width", this.scrollWidth -2 +'px' );     
    }
    /*Tbody */
    trs = this.tbody.getElementsByTagName('tr');
    for(var i=0; i < trs.length ; i++ ){
     var cols = trs[i].getElementsByTagName('td');
     for(var j=0; j < cols.length ; j++){
      cols[j].style.width = colArray[j] + 'px';
     }
    }
    /*Tfoot */
    trs = this.tfoot.getElementsByTagName('tr');
    for(var i=0; i < trs.length ; i++ ){
     var cols = trs[i].getElementsByTagName('th')||trs[i].getElementsByTagName('td');
     for(var j=0; j < cols.length ; j++){
      cols[j].style.width = colArray[j] + 'px';
     }
     var tcell1 = trs[i].insertCell(cols.length); 
     tcell1.setAttribute("width", this.scrollWidth -2 +'px');       
    }

}
   else{ // else block is for Firefox
    trs = this.tbody.getElementsByTagName('tr');
    for (x=0; x < trs.length; x++) {
     var tds = trs[x].getElementsByTagName('td');
     tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';
    }  
   
   }

</tr>
 </thead>
 
 <tbody>
  <tr class="r1">
   <td>Shahib</td>
   <td>Ulla</td>
   <td>25</td>
   <td> Bangalore</td>
   <td>India</td>
   <td>78</tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>32</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>33</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>36</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>37</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>30</th>
   <td>John</th>
   <td>Smith</th>
   <td>30</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>32</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>33</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>34</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>35</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r1">
   <td>John</th>
   <td>Smith</th>
   <td>36</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
  <tr class="r2">
   <td>John</th>
   <td>Smith</th>
   <td>37</th>
   <td>John</th>
   <td>Smith</th>
   <td>31</th>
  </tr>
 </tbody> 
 <tfoot>
  <tr>
   <th>Name</th>
   <th>Surename</th>
   <th>Age</th>
   <th>Name</th>
   <th>Surename</th>
   <th>Age</th>
  </tr>
 </tfoot>
</table>
 
<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 40);
</script>

Name	Surename	Age	City	Country	Pin
Shahib	Ulla	25	Bangalore	India	78
John	Smith	31	John	Smith	31
John	Smith	32	John	Smith	31
John	Smith	33	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	36	John	Smith	31
John	Smith	37	John	Smith	31
John	Smith	30	John	Smith	30
John	Smith	31	John	Smith	31
John	Smith	32	John	Smith	31
John	Smith	33	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	34	John	Smith	31
John	Smith	35	John	Smith	31
John	Smith	36	John	Smith	31
John	Smith	37	John	Smith	31
Name	Surename	Age	Name	Surename	Age

27 comments:

evestay said...: Hello Shahib

First of all, thank you so much for this script. It's making my life easier.

But I am having some trouble in IE and Chrome (FF works fine). When I go to your blog page, IE and Chrome display the scrolling table perfectly. But when I copy the code and create a document, Chrome does not size the table (40% or whatever). This is not a big problem. IE has a bigger problem. The header row does not remain fixed. I have this in my header before your code:

Thanks for any help.

Steve Read; October 14, 2010 at 9:07 PM
Shahib Ulla said...: Hi Steve,

I have shared the source code here.
Source Code. Please verify this.

If your still facing problem. Please mail me your script to shahib713@gmail.com, I will have a look.

Regards,
Shahib; October 15, 2010 at 11:16 AM
Anonymous said...: Hey, I've tryed your code too, and I get the same problem as evestay.
That the header is not fixed in IE.

I've tryed copying the source you provided, the source from the textarea, and the source directly from the page. None of them work in IE.; October 20, 2010 at 8:31 PM
Anonymous said...: Ok, I managed to figure out why it didn't work.
It's because different types html.

Yours:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

Mine:
?xml version="1.0" encoding="UTF-8"?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"; October 20, 2010 at 8:38 PM
Thorsten said...: This comment has been removed by a blog administrator.; October 28, 2010 at 2:04 PM
xenides said...: Hi Shahib

Thanks for the great code. Unfortunately, loading this page causes a lockup in IE8.0.6001 with one CPU core hitting 50%. Makes it hard to debug : )

Since you are a better coder than me, you might have more success diagnosing!

-- Andrew C; November 16, 2010 at 6:02 AM
Cristian said...: I do not speak English. Your table is great! Works for Internet Explorer 6.7 and 8. I can send a skin of the table please? my mail is cristian.ieci @ gmail.com thanks; November 19, 2010 at 9:59 AM
Cristian said...: You may send a skin on the table please? my mail is cristian.ieci @ gmail.com thanks . Sorry in my last post I used the google translator; November 19, 2010 at 10:06 AM
xenides said...: Funny... your blog page still makes my IE8 go crazy, but the Source Code page you put up works fine.

Thanks again.; November 26, 2010 at 8:53 AM
Shahib Ulla said...: Hi Andrew,

Can you try code in Scrollable table post. This code uses CSS and I hope this will solve your problem.

If your still facing issues. Please drop a mail to shahib713@gmail.com,
I have sent email reply to ur comment but I am not sure if it has reached you.

Anyways, Thanks a lot for using my blog.

Shahib; November 26, 2010 at 11:19 PM
PHP_GURU said...: Hi
Thanx for your unique idea,your code working fine in IE but mozilla and Chrome its not working with conjuction to mine css code.in mozilla border-collapse table got vanished and in chrome header table columns are not matched with td columns width, mine css is as below
table.tblBaseTblData{
margin:0px;
padding:0px;
*margin-left:10px;
*margin-left:0px;
border-bottom:1px solid #003366;
border-collapse:collapse;
}

table.tblBaseTblData th{
font-family:Arial,Verdana;
font-size:10px;
font-weight:bold;
background-color:#003366;
color:#F4EFEC;
height:25px;
margin:0px;
border:1px solid #003366;
}

table.tblBaseTblData td{
font-family:Arial,Verdana;
font-size:10px;
font-weight:normal;
color:#000000;
padding:2px 2px 2px 2px;
height:15px;
border:1px solid #003366;

}

table.tblBaseTblData .oddRow{
background-color:#DDDDDD;
}
table.tblBaseTblData .evenRow{
background-color:#FFFFFF;
}; December 30, 2010 at 6:57 PM
Shahib Ulla said...: This comment has been removed by the author.; January 4, 2011 at 12:30 AM
PHP_GURU said...: This comment has been removed by a blog administrator.; January 4, 2011 at 6:31 PM
PHP_GURU said...: Hi

Shahib,I tried removing border-collapse:collapse property from table css class then am to reproduce table border but i need that collapse property see if any changes can be done from ur framework end; January 4, 2011 at 6:40 PM
Shahib Ulla said...: hi PHP_Guru,

I have modified the script to suite ur requirement. Download the html page from

https://sites.google.com/site/javascriptutility/; January 6, 2011 at 12:33 AM
PHP_GURU said...: Hi shahib thanx for ur repitative help,One more help please is there any way we can move scroll start position from table tbody as seen in mozilla but in IE 7 its start from table head,is it possible to move to tbody start position; January 6, 2011 at 5:25 PM
Shahib Ulla said...: Dude,

Its possible.. but what ever u have now is better than that.

Regards,
Shahib; January 7, 2011 at 12:55 AM
Anonymous said...: I changed a line so that mozzila, safari, chrome is working too

var isChrome = navigator.userAgent.toUpperCase().indexOf('CHROME')> -1;

to

var isChrome = navigator.userAgent.toUpperCase().indexOf('MOZILLA')> -1;

Can you check if it's ok; May 21, 2011 at 4:57 PM
Shahib Ulla said...: Thanks alot buddy.

After making changes to Mozilla, Its working in Safari, FF and Chrome.

Regards,
Shahib; May 23, 2011 at 11:51 PM
Anonymous said...: Hi

Is it possible to always how the scrollbar even when there are not enough row for the table

Thanks in advance; May 31, 2011 at 2:30 PM
Shahib Ulla said...: Hi Dude,

Its possible to have scrollbar when number of rows are less.

Just need to replace Overflow: Auto with Overflow: Scroll;

I hope, it will help

Regards,
Shahib
shahib713@gmail.com; May 31, 2011 at 11:37 PM
Anonymous said...: scrolbar now show's but it also shows the horizontal scrollbar is there a way to prevent the horizontal scroll bar

thanks in advance; June 4, 2011 at 12:27 AM
Shahib Ulla said...: Hi buddy,

Yes, its possible to remove horizontal scrollbar. Here I have specified width for the table in Table tag
< table cellspacing="1" class="" id="myScrollTable" width="600px" > Just replace this with 100%

Then, there is a script which will make table scroll. You can put custom width here if you want.

var t = new ScrollableTable(document.getElementById('myScrollTable'), 40 , 600);

Please email me if you face any issue. my email id shahib713@gmail.com

Regards,
Shahib; June 4, 2011 at 10:56 AM
Ganesh said...: Hello Shahib,

Great piece of work!

I have a requirement to have horizontal scroll bar as well, having the First column to be freeze. Is there a way to accommodate my requirement with this ScrollTable script. Kindly let me know the possiblity.

Regards,
Ganesh
joingan@gmail.com; May 21, 2013 at 6:18 PM
Unknown said...: Hi Shahib,
Thank you for this very useful code.
I need to read AND set the scroll position in the table.
Can you explain how to do this?
Thank you,
Adrian
adrianaj.browne AT gmail.com; October 30, 2013 at 9:53 PM
Unknown said...: Think I have solved how to access the scroll position.
function foo(){
newTable = new ScrollableTable(document.getElementById('originalTable'), 45);
// use the tbody part
scrollTable=newTable.tbody; scrollTable.onscroll=onTableScroll;
} function onTableScroll() {
scrollTablePosition=scrollTable.scrollTop;
}
Hope this might help others.; October 31, 2013 at 8:27 PM
Unknown said...: Sorry - have to modify to take care of IE

function foo(){
newTable = new ScrollableTable(document.getElementById('originalTable'), 45);
// use the tbody part
if(newTable.isIE)
scrollTable=newTable.containerEl;
else
scrollTable=newTable.tbody; scrollTable.onscroll=onTableScroll;
}; October 31, 2013 at 8:53 PM

S7U.Blogspot.com

Pages

Oct 9, 2010

Dynamic Fixed Header Footer using Javascript

27 comments:

Search