WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Tables with sortable columns

for

Number of posts in this thread: 3 (In chronological order)

From: Christopher M Kelly
Date: Wed, Feb 16 2005 12:12PM
Subject: Tables with sortable columns
No previous message | Next message →






Tables with sortable columns




Do any of you know of a way to code tables in which the column headers can be clicked on to sort the table data?  The data is supplied via ASP.  I'm working with an outside vendor who has created search results tables that allow sorting by column header.  However, they've made each column it's own separate table!  This, of course, is inaccessible and plays heck with JAWS. 

Christopher M. Kelly, Sr.

State Farm Insurance Companies - disAbility Support

email: = EMAIL ADDRESS REMOVED =




From: Joelle Tegwen
Date: Wed, Feb 16 2005 12:41PM
Subject: Re: Tables with sortable columns
← Previous message | Next message →


Tables with sortable columns



<FONT
face="Comic Sans MS" color=#008080 size=2>I did a page *just like this* for
books.
<FONT
face="Comic Sans MS" color=#008080 size=2>I use a lot of include files when I
code, so I've copied information in that normally would be externalized (like
the stylesheet) for simplicity. I've left in includes links that are irrelevant.
This code will give a pale background to the column that has been sorted. This
table is not totally accessible since that was not a requirement for the project
I was working on. So you'll want to include things like scope, summary, caption,
etc.
<FONT
face="Comic Sans MS" color=#008080 size=2>&nbsp;
<FONT
face="Comic Sans MS" color=#008080 size=2>If you need help deciphering any of
this let me know. Database information is held in a class called clsbooks to
restrict the amount of time that the recordset object is
open.
<FONT
face="Comic Sans MS" color=#008080 size=2>&nbsp;
<FONT
face="Comic Sans MS" color=#008080 size=2>HTH
<FONT
face="Comic Sans MS" color=#008080 size=2>&nbsp;
<FONT
face="Comic Sans MS" color=#008080 size=2>Joelle Tegwen
<FONT
face="Comic Sans MS" color=#008080 size=2>&nbsp;
<FONT
face="Comic Sans MS" color=#008080 size=2>&nbsp;
<FONT
face="Comic Sans MS" color=#008080 size=2><% myDate = "August 3, 2004"
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"&nbsp;&nbsp; "<A
href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd"><html><head>&nbsp;<!--#include
file="StandardHTMLHeader.asp"-->&nbsp;<style
type="text/css">&nbsp;<!--&nbsp;&nbsp; ul.<%= page%>&nbsp;
li#<%= page%> a {&nbsp;&nbsp;&nbsp;text-decoration:
none;&nbsp;&nbsp;&nbsp;font-weight: bold;&nbsp;&nbsp;&nbsp;color:
#000000;&nbsp;&nbsp;}&nbsp;&nbsp;table.<%= response.("order")%>
td.<%= response.("order")%> {&nbsp;background:
#FFFFEE;}&nbsp;&nbsp;table.<%= response.("order")%> th.<%=
response.("order")%> {&nbsp;background: #FFFFEE;}&nbsp;&nbsp;td.author
(min-width: 25%;}&nbsp;&nbsp;td.title{min-width: 25%;)
&nbsp;
<FONT
face="Comic Sans MS" color=#008080
size=2>&nbsp;&nbsp;-->&nbsp;</style>
&nbsp;<FONT face="Comic Sans MS"
color=#008080 size=2>
&nbsp;</head>
&nbsp;
&nbsp;<body>&nbsp;<!--#include
file="../MenuSwitcher.asp"-->&nbsp;<h2><%=
thisUser.getCurrentYear() %> Books</h2>
&nbsp;
&nbsp;<p>There are <%= clsBooks.getRowCount
%> books.</p>
&nbsp;
&nbsp;<table class="bookLists <%=
response.("order") %>" cellspacing="0" cellpadding="2">&nbsp;&nbsp;
<tr>&nbsp;&nbsp;<th class="author"><a
href="BookLists.asp?page=current&amp;order=author">Author</a></th>&nbsp;&nbsp;<th
class="title"><a
href="BookLists.asp?page=current&amp;order=title">Title</a></th>&nbsp;&nbsp;<th
class="isbn" nowrap><a
href="BookLists.asp?page=current&amp;order=isbn">ISBN</a></th>&nbsp;&nbsp;<th
class="reviewer"><a
href="BookLists.asp?page=current&amp;order=reviewer">Reviewer<a/></a></th>&nbsp;&nbsp;
</tr>&nbsp;&nbsp; <% for i = 0 to clsBooks.getRowCount-1
%>&nbsp;&nbsp; &nbsp;<tr valign="top">&nbsp;&nbsp;
&nbsp;&nbsp;<td class="author"><%= clsBooks.getFieldData("Author",
i)%></td>&nbsp;&nbsp; &nbsp;&nbsp;<td class="title"><a
href="BookReview.asp?isbnNoHyph=<%= clsBooks.getFieldData("isbnNoHyph", i)
%>">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<%=&nbsp;
clsBooks.getFieldData("Title", i) %></a></td>&nbsp;&nbsp;
&nbsp;&nbsp;<td&nbsp; class="isbn" nowrap><%=&nbsp;
clsBooks.getFieldData("ISBN", i) %></td>&nbsp;&nbsp;
&nbsp;&nbsp;<td class="reviewer" nowrap><%=
clsBooks.getFieldData("ReviewerName",
i)%></td>&nbsp;&nbsp;</tr>&nbsp;&nbsp;<% next
%>&nbsp;</table>
&nbsp;
&nbsp;<!--#include
file="StandardHTMLFooter.asp"-->
&nbsp;
&nbsp;<SPAN
class=909311919-16022005>
&nbsp;
&nbsp;
&nbsp;


From: christopher.m.kelly.gm22
[mailto: = EMAIL ADDRESS REMOVED = ] Sent: Wednesday,
February 16, 2005 1:12 PMTo: WebAIM Discussion
ListSubject: [WebAIM] Tables with sortable
columns

Do any of you know of a way to code tables in which
the column headers can be clicked on to sort the table data?&nbsp; The data is
supplied via ASP.&nbsp; I'm working with an outside vendor who has created
search results tables that allow sorting by column header.&nbsp; However,
they've made each column it's own separate table!&nbsp; This, of course, is
inaccessible and plays heck with JAWS.&nbsp;
Christopher M.<FONT face=Arial
size=2> Kelly, Sr. State Farm Insurance
Companies - disAbility Support email:
= EMAIL ADDRESS REMOVED =

From: reply-to:to:subject:in-reply-to:mime-version:content-type:content-transfer-encoding:references;
Date: Wed, Feb 16 2005 10:42PM
Subject: Re: Tables with sortable columns
← Previous message | No next message

I happened to find this the other day when I was looking for ASP
tutorials myself!

http://www.w3schools.com/ado/showasp.asp?filename=demo_sort_3

There is a whole heaps of ASP tutorials and things on w3schools.

Hope it helps!

-Lisa


On Wed, 16 Feb 2005 13:41:20 -0600, Joelle Tegwen wrote:
> I did a page *just like this* for books.
> I use a lot of include files when I code, so I've copied information in that
> normally would be externalized (like the stylesheet) for simplicity. I've
> left in includes links that are irrelevant. This code will give a pale
> background to the column that has been sorted. This table is not totally
> accessible since that was not a requirement for the project I was working
> on. So you'll want to include things like scope, summary, caption, etc.
>
> If you need help deciphering any of this let me know. Database information
> is held in a class called clsbooks to restrict the amount of time that the
> recordset object is open.
>
> HTH
>
> Joelle Tegwen
>
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
>
>
>
>
> <!--
> ul. li# a {
> text-decoration: none;
> font-weight: bold;
> color: #000000;
> }
> table. td. { background:
> #FFFFEE;}
> table. th. { background:
> #FFFFEE;}
> td.author (min-width: 25%;}
> td.title{min-width: 25%;)
>
> -->
>
>
>
>
>
>
>
> Books
>
> There are books.
>
> " cellspacing="0"
> cellpadding="2">
>
> <a
> href="BookLists.asp?page=current&order=author">Author
> <a
> href="BookLists.asp?page=current&order=title">Title
> <a
> href="BookLists.asp?page=current&order=isbn">ISBN
> <a
> href="BookLists.asp?page=current&order=reviewer">Reviewer
>
>
>
>
> <a href="BookReview.asp?isbnNoHyph=<%> clsBooks.getFieldData("isbnNoHyph", i) %>">
>
>
> <%= clsBooks.getFieldData("ReviewerName",
> i)%>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ________________________________
> From: christopher.m.kelly.gm22
> [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Wednesday, February 16, 2005 1:12 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Tables with sortable columns
>
>
>
> Do any of you know of a way to code tables in which the column headers can
> be clicked on to sort the table data? The data is supplied via ASP. I'm
> working with an outside vendor who has created search results tables that
> allow sorting by column header. However, they've made each column it's own
> separate table! This, of course, is inaccessible and plays heck with JAWS.
>
> Christopher M. Kelly, Sr.
> State Farm Insurance Companies - disAbility Support
> email: = EMAIL ADDRESS REMOVED =
>