Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fixed header table problem

Status
Not open for further replies.

alohaaaron

Programmer
Mar 27, 2008
80
US
Hi, I'm using supertables (an html table with a fixed header) from this site
When I use the table with a php file pulling data from a server it works fine. I can scroll up and down and the header stays fixed. The page is refreshed when the table is built. But when I use jquery to put the data into a "#selector" then the first row of the table is no longer fixed when I scroll up and down. Does the page need to be refreshed when the table is drawn so it displays correctly? I'm using jquery so don't want to have to refresh the page. I also use a change height script that runs after the table is drawn so it fits in the browser properly.
Thanks for the help.

In my test below just one field of 50 rows is returned from the database.

*note. javascript libraries for supertables, jquery and css left out but assumed.

Code:
<html>
<head>
<script type="text/javascript">
$(function () {
	
	$("#mybutton").click(function () {	
		$("#demoTableB").load("querysqlsearch.php?flag=" + flag + "&date1=" + date1 + "&date2=" + date2 + "&" + mystring );  //query database and load into selector
        });
});


</script>
</head>
<body>
<button id="mybutton"</button>

<div class="fakeContainer" ID="Soup" >
<TABLE ID="demoTableB">

<!-- Table headers and body pulled from .php file here -->
<tr><th>State</th></tr>
<tr><td>WA</td></tr>
<tr><td>AK</td></tr>
<tr><td>FL</td></tr>
<tr><td>HI</td></tr>
<tr><td>MN</td></tr>
..


</TABLE>
</div>

<script>
function changeheight(){
 e=document.getElementById("Soup");
 e.style.height = screen.availHeight-400;
 e.style.overflow="auto";
}

//<![CDATA[

(function () {
   
    new superTable("demoTableB", {
        cssSkin : "sSky",
		headerRows : 1,
        fixedCols : 1,
		colWidths : [-1],
		onStart : function () {
			this.start = new changeheight();
		}
    });
})();

</script>
</body>
</html>
 
probably not the answer you want to hear, but since the post is old and I have no experience in super tables, I'd suggest you take a look at Data tables
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top