Need to borrow your brain for large <table>

R

RC

Dear Dudes,

I post this in multiple groups for opening brain storm.

Sometime I need to query the data from database server then display them
into user's browser in HTML <table>. But if the <table> is very LARGE,
let's say 20 columns, hundreds rows. Usually you have header <th> tags
on 1st (top) row and 1st (most left) column. For a such LARGE <table>.
you really want:

1) When scroll the vertical scroll bar, you want the top row header
<thead> stay in the same position, the rest of rows are move up/down
(this will include the most left column).

I am success doing this part.

2) When you scroll the horizontal scroll bar, you want the most left
column stay in the same position, the rest of columns are move
left/right (this will include the top header row).

I don't know how to do this part, need to borrow your brain for help!
Thank Q very much in advance!

You can check out my test page from

http://amazon.nws.noaa.gov/hads/test/15C2C420.html

Here is basicly what I do

<html><title>Scrollable Table</title><head>
<script language="JavaScript">
var preRow = null;
function changeRow(thisRow) {
if (preRow != null)
preRow.bgColor = "white";
thisRow.bgColor = "cyan";
preRow = thisRow;
}
</script>
<style type="text/css">
tbody { max-height: 30em; overflow: auto; }
th { background-color: lightgrey; }
th.left { background-color: cyan; }
</style></head><body>

<table border=1 width="100%">

<thead>
<tr><th class="left">col1,row1</th>..... <th>coln,row1</th></tr>
</thead>

<tbody>
<tr onClick="changeRow(this)">
<th class="left">col1,row2</th><td>col2,row2</td>......
<td>coln,row2</td></tr>
.....
.....
<tr onClick="changeRow(this)">
<th class="left">col1,rown</th><td>col2,rown</td>......
<td>coln,rown</td></tr>

</tbody>
</table></body></html>

I prefer doing this by CSS, HTML/DHTML/XDHTML, XML and little
Javascript. Java <applet> Swing JTable will be last resource,
because user has different browser, some not support Java 1.x.
And load large data into *.jar for <applet> will take time.

I did some Google search, I found two sites doing this by JavaScript.
But I prefer not to load huge file, run the JavaScript on client site.
I prefer load plain text HTML from server. Of cource, I'll keep mind
open use JavaScript grid as 2nd choice.

Here are those two good sites:

http://www.activewidgets.com/

Above site the most left column is label in sequence row number, like
preadsheet. Not very good.

http://www.theopensourcery.com/jsgrids.htm
 
R

Rhino

RC said:
Dear Dudes,

I post this in multiple groups for opening brain storm.
Click to expand...
Big mistake! It is bad Usenet netiquette to crosspost to many different
newsgroups on the same problem, especially such diverse ones. The netiquette
people are going to be all over you....
Sometime I need to query the data from database server then display them
into user's browser in HTML <table>. But if the <table> is very LARGE,
let's say 20 columns, hundreds rows. Usually you have header <th> tags
on 1st (top) row and 1st (most left) column. For a such LARGE <table>.
you really want:

1) When scroll the vertical scroll bar, you want the top row header
<thead> stay in the same position, the rest of rows are move up/down
(this will include the most left column).

I am success doing this part.

2) When you scroll the horizontal scroll bar, you want the most left
column stay in the same position, the rest of columns are move
left/right (this will include the top header row).

I don't know how to do this part, need to borrow your brain for help!
Thank Q very much in advance!

You can check out my test page from

http://amazon.nws.noaa.gov/hads/test/15C2C420.html

Here is basicly what I do

<html><title>Scrollable Table</title><head>
<script language="JavaScript">
var preRow = null;
function changeRow(thisRow) {
if (preRow != null)
preRow.bgColor = "white";
thisRow.bgColor = "cyan";
preRow = thisRow;
}
</script>
<style type="text/css">
tbody { max-height: 30em; overflow: auto; }
th { background-color: lightgrey; }
th.left { background-color: cyan; }
</style></head><body>

<table border=1 width="100%">

<thead>
<tr><th class="left">col1,row1</th>..... <th>coln,row1</th></tr>
</thead>

<tbody>
<tr onClick="changeRow(this)">
<th class="left">col1,row2</th><td>col2,row2</td>......
<td>coln,row2</td></tr>
....
....
<tr onClick="changeRow(this)">
<th class="left">col1,rown</th><td>col2,rown</td>......
<td>coln,rown</td></tr>

</tbody>
</table></body></html>

I prefer doing this by CSS, HTML/DHTML/XDHTML, XML and little
Javascript. Java <applet> Swing JTable will be last resource,
because user has different browser, some not support Java 1.x.
Click to expand...

Then I strongly suggest that you keep your problem out of the
comp.lang.java.* newsgroups until you have thoroughly explored CSS,
HTML/DHTML/XDHTML, XML and Javascript to see if they can help you with your
problem.

I certainly don't want to be bothered trying to show you how this problem
can be solved via Java if you don't want to use Java in the first place.
And load large data into *.jar for <applet> will take time.
Click to expand...
You don't normally load data of the kind you are describing into jars. It is
much more common to access data from databases like MySQL or DB2 via JDBC,
rather than storing the data in jars. After all, the data will presumably be
changing regularly so you will always want to access the "latest and
greatest" data; the best place to do that is in a database.
I did some Google search, I found two sites doing this by JavaScript.
But I prefer not to load huge file, run the JavaScript on client site.
I prefer load plain text HTML from server. Of cource, I'll keep mind
open use JavaScript grid as 2nd choice.

Here are those two good sites:

http://www.activewidgets.com/

Above site the most left column is label in sequence row number, like
preadsheet. Not very good.

http://www.theopensourcery.com/jsgrids.htm
Click to expand...

I am relatively sure that the behaviour you want can be accomplished fairly
easily in Java via JTables but I am not going to waste time describing this
if you don't want to use Java in the first place.

Why don't you try the other approaches first, then come back to
comp.lang.java.gui if the other approaches don't work to your satisfaction?

Rhino
 
R

Roedy Green

Sometime I need to query the data from database server then display them
into user's browser in HTML <table>. But if the <table> is very LARGE,
let's say 20 columns, hundreds rows. Usually you have header <th> tags
on 1st (top) row and 1st (most left) column. For a such LARGE <table>.
you really want:
Click to expand...

There are ways of doing that with CSS/HTML but they are pretty flaky.
I tried many of the hacks and gave up because, every browser behaves a
different way.

Take the bull by the horns and put an Applet in JAWS app in your
client with a JTable and a TableModel. Then you can make it do tricks
like a circus pony.
 
T

Tex

You can check out my test page from
http://amazon.nws.noaa.gov/hads/test/15C2C420.html
Click to expand...

Consider a JVM 1.1 Applet as virtually everyone has that, and then
your can build an application rather than a web page. In your example
your data appears to include:
1. Temp: Readings, Avg, Max, Min
2. Wind Speed: Readings, Hr Avg, Daily Avg, Peak
3. Wind Direction: Readings, Hr Avg, Daily Avg, @ Peak
etc.

With an applet you can download the readings and build all else
on the client machine and present it anyway you want including
scrollable tables and graphs, and the graphs can be scrolled
and the scale changed. You could add movable brackets to
a graph so user could get Avg, Min, Max, etc over any period
desired.

And the applet can download very compact data. As one example,
I had several tables which as a text file was 85K, as a binary file
was 15K which packed into a Jar as 5K.

You could pack the readings into binary and then to zip files by say
month, or quarter, or whatever is best for the application, and an
applet can spawn threads to download additional files while
working on initial data.

A TMY hourly weather file for a given city for a while year is approx
146K in binary and 72K as zip. An applet can unpack zip files and
can decode binary, e.g. TMY weather files.

So, your initial request was help building same-old, same-old,
web page w/ a little jazz via a scrollable table. With applets you
can consider building an application, and they are much more
valuable to your users.

--tex
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
Filter table rows based on multiple checkboxes value 2
Sort by number of characters 1
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to add dropdown selected data to table using jquery 2
Only one table shows up with the information 2
Javascript DOM 1

Members online

Total: 49 (members: 2, guests: 47)
Robots: 328

Forum statistics

Threads
473,996
Messages
2,570,238
Members
46,826
Latest member
robinsontor

Latest Threads

Top