alohaaaron
Programmer
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.
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>