473,703 Members | 3,941 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Table Widget for IE? Fixed header, sorting columns, etc

I'm looking for the best JS/CSS solution to add functionality to tables.
The only browser which needs to be supported is IE5.5+, but no activeX can
be used.

to be able to do:
- Fixed header row
- Data sorting (preferrably intelligently determining data type based on
content)
- If possible, locking the first column from scrolling

I've seen one solution at
http://web.tampabay.rr.com/bmerkey/e...olumn-csv.html which is
pretty good, but it uses a DIV that scrolls and puts the table within it,
making the header row move down as the DIV is scrolled. This works, but it's
not as elegant and simple as I'd like.

I wish IE would support tbody{scroll:au to} but we're not that lucky :(

--
Matt Kruse
http://www.JavascriptToolbox.com
Jul 23 '05 #1
17 3697
Matt Kruse wrote:
I'm looking for the best JS/CSS solution to add functionality to tables.
The only browser which needs to be supported is IE5.5+, but no activeX can
be used.

to be able to do:
- Fixed header row
- Data sorting (preferrably intelligently determining data type based on
content)
- If possible, locking the first column from scrolling
http://mickweb.com/football/aleague/profiles.html

Something like this?

Mick
I've seen one solution at
http://web.tampabay.rr.com/bmerkey/e...olumn-csv.html which is
pretty good, but it uses a DIV that scrolls and puts the table within it,
making the header row move down as the DIV is scrolled. This works, but it's
not as elegant and simple as I'd like.

I wish IE would support tbody{scroll:au to} but we're not that lucky :(

Jul 23 '05 #2
Matt Kruse wrote:
I'm looking for the best JS/CSS solution to add functionality to tables.
The only browser which needs to be supported is IE5.5+, but no activeX can
be used.
Curiosity - Why IE5.5+?
to be able to do:
- Fixed header row
There are examples in the archives. I will try to hunt them down this
afternoon if you cant find them.

It used the TBODY if I remember right. It was even cross-browser :)
- Data sorting (preferrably intelligently determining data type based on
content)
- If possible, locking the first column from scrolling
In IE, I think you are going to have to go to a second table, to hold
that first column to keep it from scrolling. Or, are you referring to
the rows?
I've seen one solution at
http://web.tampabay.rr.com/bmerkey/e...olumn-csv.html which is
pretty good, but it uses a DIV that scrolls and puts the table within it,
making the header row move down as the DIV is scrolled. This works, but it's
not as elegant and simple as I'd like.

I wish IE would support tbody{scroll:au to} but we're not that lucky :(

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq
Jul 23 '05 #3
Mick White wrote:
http://mickweb.com/football/aleague/profiles.html
Something like this?


For purely sorting, that works. But it doesn't do it intelligently - it
requires a parameter to explicitly say what the data type is.

--
Matt Kruse
http://www.JavascriptToolbox.com
Jul 23 '05 #4
Randy Webb wrote:
Curiosity - Why IE5.5+?


Because the web app in which I'm needing to incorporate it is IE5.5+ only,
and already relies on many IE-specific functionalities . It's not an internet
app.
to be able to do:
- Fixed header row

There are examples in the archives. I will try to hunt them down this
afternoon if you cant find them.
It used the TBODY if I remember right. It was even cross-browser :)


I've had a hard time finding ones that work well. The one I referenced in my
earlier post, as it turns out, even breaks when I put a <form> tag on the
page. Renders it fairly useless ;)
- If possible, locking the first column from scrolling

In IE, I think you are going to have to go to a second table, to hold
that first column to keep it from scrolling. Or, are you referring to
the rows?


Nope, definitely column. And the example url does this also.

--
Matt Kruse
http://www.JavascriptToolbox.com
Jul 23 '05 #5
In article <ch*********@ne ws1.newsguy.com >, ne********@matt kruse.com
enlightened us with...
I'm looking for the best JS/CSS solution to add functionality to tables.
The only browser which needs to be supported is IE5.5+, but no activeX can
be used.


Will this one do?

http://www.ipwebdesign.net/kaelisSpa...tableSort.html

You'd need to modify it for the first row thing.

--
--
~kaeli~
Why did kamikaze pilots wear helmets?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #6
Matt Kruse wrote:
I'm looking for the best JS/CSS solution to add functionality
to tables. The only browser which needs to be supported is
IE5.5+, but no activeX can be used.

to be able to do:
- Fixed header row
- Data sorting (preferrably intelligently determining
data type based on content)
- If possible, locking the first column from scrolling

I've seen one solution at
http://web.tampabay.rr.com/bmerkey/e...olumn-csv.html
Yes, that doesn't work very well without activeX.
which is pretty good, but it uses a DIV that scrolls and puts
the table within it, making the header row move down as the
DIV is scrolled. This works, but it's not as elegant and
simple as I'd like.
I wrote a fixed header scrolling table recently (it is not IE 5.5+
only):-

<URL: http://litotes.demon.co.uk/example_s...bleScroll.html >

But trying to combine it with table sorting might get a bit involved as
it uses two clones of the original table so that the header cells are
the same dimensions as the corresponding rows/columns so it would
require re-ordering the rows in two table for the sorting, and the
re-assignment of the position reporting object for the cell that defines
the offsets for the various tables. It could be done but it wouldn't be
that fast on a big table.

Your desire to have the sort criteria 'intelligently' determined is
another of your attempts to be overly general. You will not manage to be
that general as I think you would have no choice but examine the cell
contents with a regular expression to see if it was a Date, number or
whatever. You would probably have to run through an entire column when
making that test and would still be forced to make many assumptions
about the format of the possible cell contents.
I wish IE would support tbody{scroll:au to} but we're not
that lucky :(


The scrolling TBODY approach doesn't work that well anyway. The problem
is that the TBODY will be as wide as the THEAD so when the TBODY
acquires a vertical scroll bar its contents overflow the remaining space
and a horizontal scroll bar appears. So you can scroll the TBODY
horizontally and so stop the columns lining up with their header cells.

Richard.
Jul 23 '05 #7
"Matt Kruse" <ne********@mat tkruse.com> wrote in message
news:ch******** *@news1.newsguy .com...
I'm looking for the best JS/CSS solution to add functionality to tables.
to be able to do:
- Fixed header row
- Data sorting (preferrably intelligently determining data type based on
content)
- If possible, locking the first column from scrolling

I've seen one solution at
http://web.tampabay.rr.com/bmerkey/e...olumn-csv.html which is pretty good, but it uses a DIV that scrolls and puts the table within it,
making the header row move down as the DIV is scrolled. This works, but it's not as elegant and simple as I'd like.

I believe the cited URL and this cross-browser variation
http://web.tampabay.rr.com/bmerkey/e...le-header.html

are as elegant and simple as it gets. Our teams have used it for years in
forms-based Web apps. Making CSS do most of that work makes all
scripting tasks, such as sorting, selection for further operations, and
filtering
large tables, a whole lot easier.

Not sure why putting a DIV around a table is a problem for you but I doubt
if you will find a robust script that "intelligen tly" figures out the data
type. It
is so much easier all around to give the script that information at the
outset.
After all, manually or thru database population, you know the datatype at
the outset. Why not pass on the info to the script?

If you put together something that does all you want, please post it.

Brett
Jul 23 '05 #8
Richard Cornford wrote:
I've seen one solution at
http://web.tampabay.rr.com/bmerkey/e...olumn-csv.html Yes, that doesn't work very well without activeX.


Actually, it works fine without ActiveX. The only thing X is used for is the
data population. If you take that out and put in static data, it works fine,
and purely via CSS.
I wrote a fixed header scrolling table recently (it is not IE 5.5+
only):-
<URL: http://litotes.demon.co.uk/example_s...bleScroll.html >
Cannot find server or DNS Error
Your desire to have the sort criteria 'intelligently' determined is
another of your attempts to be overly general.
No it's not. Don't be obtuse.
You will not manage to
be that general as I think you would have no choice but examine the
cell contents with a regular expression to see if it was a Date,
number or whatever. You would probably have to run through an entire
column when making that test and would still be forced to make many
assumptions about the format of the possible cell contents.
Actually, I was thinking of just looking at the first 3-5 values. If they're
all numeric, use numeric sort. If they match \d+/\d+/\d+ then use date. Etc,
etc. If all else fails, fall back to alphanumeric sort. It should handle
most common cases.
The scrolling TBODY approach doesn't work that well anyway. The
problem is that the TBODY will be as wide as the THEAD so when the
TBODY acquires a vertical scroll bar its contents overflow the
remaining space and a horizontal scroll bar appears.


overflow-x:hidden;

--
Matt Kruse
http://www.JavascriptToolbox.com
Jul 23 '05 #9
Matt Kruse wrote:
Richard Cornford wrote:
I've seen one solution at
http://web.tampabay.rr.com/bmerkey/e...olumn-csv.html

Yes, that doesn't work very well without activeX.


Actually, it works fine without ActiveX. The only
thing X is used for is the data population. If you
take that out and put in static data, it works fine,
and purely via CSS.


Fair enough, its not much of a demonstration without the data.
I wrote a fixed header scrolling table recently (it is not IE 5.5+
only):-
<URL: http://litotes.demon.co.uk/example_s...bleScroll.html >


Cannot find server or DNS Error


Sorry, I forgot the www from the front:-

<URL: http://www.litotes.demon.co.uk/examp...bleScroll.html >
Your desire to have the sort criteria 'intelligently' determined
is another of your attempts to be overly general.


No it's not. Don't be obtuse.
You will not manage to be
that general as I think you would have no choice but examine
the cell contents with a regular expression to see if it was
a Date, number or whatever. You would probably have to run
through an entire column when making that test and would
still be forced to make many assumptions about the
format of the possible cell contents.


Actually, I was thinking of just looking at the first 3-5 values.
If they're all numeric, use numeric sort. If they match
\d+/\d+/\d+ then use date. Etc, etc. If all else fails,
fall back to alphanumeric sort. It should handle most common
cases.


That is quite an assumption.
The scrolling TBODY approach doesn't work that well anyway. The
problem is that the TBODY will be as wide as the THEAD so when the
TBODY acquires a vertical scroll bar its contents overflow the
remaining space and a horizontal scroll bar appears.


overflow-x:hidden;


And with CSS?

Richard.
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
2894
by: Margaret MacDonald | last post by:
It appears that the 'table.field' dot notation is not preserved by php's mysql library. I can create some join 'SELECT a.id, b.id FROM table1 AS a, table2 AS b' but when I try to refer to the fields as 'a.id' and 'b.id' the reference fails because the table aliases have been discarded from the dataset as managed by php. 'a.id' has become merely 'id', and 'b.id' no longer has a fieldname -- the only way to refer to it is by the numeric...
9
6231
by: johkar | last post by:
I only have IE 6 and dial-up. Can you help me determine which browsers support this code? Thanks, John <html> <head> <title>Fixed Table Headers</title> <script language="JavaScript" type="text/javascript"> function fix(){
2
3193
by: Mel | last post by:
Scrollable table widget with fixed header is there such thing ? thanks, Mel
0
1499
by: Tim N. van der Leeuw | last post by:
Hi, I need to display some hierarchical data, and because I don't want to force users to install too many things beyond Python itself, I'm hoping to use Tix which is at least included with Python. I've managed to use the Tix HList widget to display a tree of items (at least in a proof-of-concept miniprogram) but I actually need to display 2 columns -- perhaps more.
10
2195
by: Omar | last post by:
I'm looking for a programming language or module that sorta looks and feels like MS Excel (I love and think in tables), yet has the power and open-endedness of python or javascript. I'm still pretty new to python. any ideas? i've been having some fun with VBA in excel, but I want something I can save as en exe and call my own creation, y'know?
7
4825
by: Kamal | last post by:
Hello all, I have a very simple html table with collapsible rows and sorting capabilities. The collapsible row is hidden with css rule (display:none). When one clicks in the left of the expandable row, the hidden row is made visible with css. The problem is when i sort the rows, the hidden rows get sorted as well which i don't want and want to be moved (while sorting) relative to their parent rows. The following is my complete html code...
1
5194
by: MissMarie | last post by:
I've been playing around with DIV tables in myspace to better learn how to rewrite my own code for my business site without having to pay someone to design it. I've tried embedding a slideshow into a div table and after I save it I noticed that the slideshow does not show up and the embed code I added is altered. Can anyone help me figure this out? The embed code that I'm talking about is three quarters down the code page under {PHOTOS},...
5
13787
by: Romulo NF | last post by:
Greetings, I´m back here to show the new version of the drag & drop table columns (original script ). I´ve found some issues with the old script, specially when trying to use 2 tables with drag&drop on the same page (which was not possible). Now i´ve a new concept of the script, more object oriented. I´ve also commented the whole code so you guys can easier understand it engine. What exactly we need when trying to make a column drag &...
5
4950
by: jrod11 | last post by:
hi, I found a jquery html table sorting code i have implemented. I am trying to figure out how to edit how many colums there are, but every time i remove code that I think controls how many colums there are, it crashes. There are currently 6 columns, and I only want 4. How do I remove the last two (discount and date)? Here is a link: http://www.jaredmoore.com/tablesorter/docs/salestable.html Here is some jquery js that I think...
0
8674
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9262
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9125
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9018
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6595
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4690
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3127
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2463
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2070
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.