Excellent. But how can we specify an ID for the display table ???
On the code var table = document.getElementsByTagName("table")[0];
U assume, the 1st table of the document. But in "real-life" cases, the
display is not the only HTML table
Thanks,
Didier.
_______________________
Didier Dubois
dotBase solutions informatiques SA
25, route des Acacias
CH - 1227 Gen�ve
Tel. +41 22 301 07 07
Fax. +41 22 301 07 08
|---------+------------------------------------------->
| | "Matt Raible" |
| | <[EMAIL PROTECTED]> |
| | Sent by: |
| | [EMAIL PROTECTED]|
| | ceforge.net |
| | |
| | |
| | 04/06/2003 09:04 PM |
| | |
|---------+------------------------------------------->
>-------------------------------------------------------------------------------------------------|
|
|
| To: <[EMAIL PROTECTED]> |
| cc:
|
| Subject: Re: [displaytag-user] Sorting with the Display Tag
|
>-------------------------------------------------------------------------------------------------|
> First of all, I would like to congratulate the developers. This display
> tag is great.
> I am building a table using the library that allows users to sort
> columns. I would like to indicate which column is currently being
> sorted and in which direction by displaying an arrow next to the column
> title like Hotmail, Yahoo Mail, etc.
> How can I accomplish this with the Display Tag Library?
This is currently not a feature in the tag, but I whipped up a little
JavaScript and CSS to make this possible:
CSS
---------
th.sorted {
background: #A9A9A9 !important;
color: #000000 !important;
cursor: pointer !important; /* IE 5.5 non-compliant workaround */
cursor: hand !important;
padding-left: 3px;
}
img.sortIndicator {
margin-left: 3px;
}
JavaScript
------------
function addSortIndicator() {
var table = document.getElementsByTagName("table")[0];
var cols = table.getElementsByTagName("th");
var sort = "<c:out value="${param.sort}"/>";
var order = "<c:out value="${param.order}"/>";
// my own little hack to set the right name for the image
if (order == "dec") {
order = "desc";
}
if (sort == "") {
setIndicator(cols[3], "desc"); // 4th column is sorted in query
} else {
setIndicator(cols[sort], order);
}
}
window.onload=addSortIndicator;
function setIndicator(e, order) {
e.className = "sorted";
var indicator = document.createElement("img");
indicator.setAttribute("src",
"<%=request.getContextPath()%>/images/"+order+".gif");
indicator.setAttribute("width", "9");
indicator.setAttribute("height", "10");
indicator.setAttribute("alt", (order == "asc") ? "Ascending" :
"Descending");
indicator.className = "sortIndicator";
e.appendChild(indicator);
}
You can download the images I used from:
http://raibledesigns.com/demos/images/
This works great for me - thanks for the idea!
Matt
-------------------------------------------------------
This SF.net email is sponsored by: Etnus, makers of TotalView, The best
thread debugger on the planet. Designed with thread debugging features
you've never dreamed of, try TotalView 6 free at www.etnus.com.
_______________________________________________
displaytag-user mailing list
[EMAIL PROTECTED]
https://lists.sourceforge.net/lists/listinfo/displaytag-user
-------------------------------------------------------
This SF.net email is sponsored by: Etnus, makers of TotalView, The best
thread debugger on the planet. Designed with thread debugging features
you've never dreamed of, try TotalView 6 free at www.etnus.com.
_______________________________________________
displaytag-user mailing list
[EMAIL PROTECTED]
https://lists.sourceforge.net/lists/listinfo/displaytag-user
