Software Technology Tips

Sometimes when designing a table in html page we find a lot of columns for a table which exceeds the width of the page. In this case the horizontal scrollbar of the browser come into play. But when we scroll the horizontal scroll bar we can not see the first column which generally contains the identifier(primary key) of that record. We can view the data but can not recognize the data of which record. Here we need the first column(identifier column) to be fixed and only the data should move with the horizontal scroll.


Similarly when we have a lot of records in the table, the vertical scroll bar comes into play. When we scroll vertically, the header goes up and we can not see the header, only we can see the data. So in this case we can view the data but we find difficulty to know the data is of which column. So here we need to kepe the header fixed, so that only data can move when we use the vertical scroll bar.

 

Here is a simple code to make the header and first column of the html table fixed using lasso inline for fetching records.

 

<html>
    <head>
        <title>Opal Task Test1</title>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script>
            $(document).ready(function()
            {
                fnAdjustTable();
            });
           
            fnAdjustTable=function()
            {
                var colCount=$('#firstTr>td').length; //get total number of column
                var m=0;
                var n=0;
                var brow='mozilla';
                jQuery.each(jQuery.browser, function(i, val)
                {
                    if(val==true)
                    {
                        brow=i.toString();
                    }
                });
                $('.tableHeader').each(function(i)
                {
                    if(m<colCount)
                    {
                        if(brow=='mozilla')
                        {
                            $('#firstTd').css("width",$('.tableFirstCol').innerWidth());//for adjusting first td
                            $(this).css('width',$('#table_div td:eq('+m+')').innerWidth());//for assigning width to table Header div
                        }
                        else if(brow=='msie')
                        {
                            $('#firstTd').css("width",$('.tableFirstCol').width());
                            $(this).css('width',$('#table_div td:eq('+m+')').width()-2);//In IE there is difference of 2 px
                        }
                        else if(brow=='safari')
                        {
                            $('#firstTd').css("width",$('.tableFirstCol').width());
                            $(this).css('width',$('#table_div td:eq('+m+')').width());
                        }
                        else
                        {
                            $('#firstTd').css("width",$('.tableFirstCol').width());
                            $(this).css('width',$('#table_div td:eq('+m+')').innerWidth());
                        }
                    }
                    m++;
                });
               
                $('.tableFirstCol').each(function(i)
                {
                    if(brow=='mozilla')
                    {
                        $(this).css('height',$('#table_div td:eq('+colCount*n+')').outerHeight());//for providing height using scrollable table column height
                    }
                    else if(brow=='msie')
                    {
                        $(this).css('height',$('#table_div td:eq('+colCount*n+')').innerHeight()-2);
                    }
                    else
                    {
                        $(this).css('height',$('#table_div td:eq('+colCount*n+')').height());
                    }
                    n++;
                });
            }

            //function to support scrolling of title and first column
            fnScroll=function()
            {
                $('#divHeader').scrollLeft($('#table_div').scrollLeft());
                $('#firstcol').scrollTop($('#table_div').scrollTop());
            }

        </script>
    </head>
    <body>
        <table cellspacing="0" cellpadding="0" border="1">
            <!--<thead style="position:absolute;">-->
            <tr>
                <td id="firstTd">ID</td>
                <td style="width:900px">
                    <div id="divHeader" style="overflow:hidden;width:900px;">
                        <table cellspacing="0" cellpadding="0" border="1" width="100%" >
                            <tr>
                                [Loop: 20]
                                <td>
                                    <div class="tableHeader">Header</div>
                                </td>
                                [/Loop]
                                <td>
                                    <!--This is for the width of the vertical scroll bar in the data table-->
                                    <div style="width:25px">&nbsp;</div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <div id="firstcol" style="overflow: hidden;height:500px">
                        <table width="50px" cellspacing="0" cellpadding="0" border="1" >
                            [Inline: -Search,-Database='test',-Table='test_table', -MaxRecords=All]
                            [Records]
                            <tr>
                                <td class="tableFirstCol">[Field('id')]</td>
                            </tr>
                            [/Records]
                            [/Inline]
                            <tr>
                                <!--This is for the width of the horozontal scroll bar in the data table-->
                                <td style="height:20px">&nbsp;&nbsp;</td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td valign="top" width="900px">
                    <div id="table_div" style="overflow: scroll;width:900px;height:500px;position:relative" onscroll="fnScroll()" >
                        <table width="900px" cellspacing="0" cellpadding="0" border="1" >
                            [Inline: -Search,-Database='test',-Table='test_table', -MaxRecords=All]
                            [Records]
                            <tr [If( Loop_Count == 1 )] id='firstTr' [/If]>
                                [Loop: 20]
                                <td><div class="tableData">[Field('f'+Loop_Count)]</div></td>
                                [/Loop]
                            </tr>
                            [/Records]
                            [/Inline]
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>


Related Tags:

fixed header, fixed column, fixed header fixed column, fixed header table, fixed column table, fixed header fixed column lasso

Author: Gourav Singh

JavaScript

Let us Connect!

iso 9001 QA25 Red Herring STPI D&B Fastest Growing SME 2013 Award zinnov Nasscom

This site uses cookies. We respect your privacy.copyright (c) Mindfire Solutions 2007-2015. Login