473,326 Members | 2,255 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

sorting content of table at client side

Hello,

Fiest of all let me thank this group for so quick in responding to any
postings.
I am using a javascript based utility from a site to sort the columns
of the table. But, for some strange reason it is not working on colmuns
containg checkboxes, text-boxes (or, any user input fileds). For
checkbox column, the values are lost when clicked on the column title
to sort.
I tried a lot to modify but couldnt achive what I wanted.

I have pasted the code of 'SortTable.js' and the HTML file
'SimpleSample.html'

Please help me out.

Thanks a ton,
CG

FILES :

1. SortTable.js
//----------------
addEvent(window, "load", sortables_init);

var SORT_COLUMN_INDEX;
function sortables_init() {
// Find all tables with class sortable and make them sortable
if (!document.getElementsByTagName) return;
tbls = document.getElementsByTagName("table");
for (ti=0;ti<tbls.length;ti++) {
thisTbl = tbls[ti];
if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) &&
(thisTbl.id)) {
//initTable(thisTbl.id);
ts_makeSortable(thisTbl);
}
}
}

function ts_makeSortable(table) {
if (table.rows && table.rows.length > 0) {
var firstRow = table.rows[0];
}
if (!firstRow) return;

// We have a first row: assume it's the header, and make its contents
clickable links
for (var i=0;i<firstRow.cells.length;i++) {
var cell = firstRow.cells[i];
var txt = ts_getInnerText(cell);
cell.innerHTML = '<a href="#" class="sortheader"
onclick="ts_resortTable(this);return false;">'+txt+'<span
class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a>';
}
}

function ts_getInnerText(el) {
if (typeof el == "string") return el;
if (typeof el == "undefined") { return el };
if (el.innerText) return el.innerText; //Not needed but it is faster
var str = "";

var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
switch (cs[i].nodeType) {
case 1: //ELEMENT_NODE
str += ts_getInnerText(cs[i]);
break;
case 3: //TEXT_NODE
str += cs[i].nodeValue;
break;
}
}
return str;
}

function ts_resortTable(lnk) {
// get the span
var span;
for (var ci=0;ci<lnk.childNodes.length;ci++) {
if (lnk.childNodes[ci].tagName &&
lnk.childNodes[ci].tagName.toLowerCase() == 'span') span =
lnk.childNodes[ci];
}
var spantext = ts_getInnerText(span);
var td = lnk.parentNode;
var column = td.cellIndex;
var table = getParent(td,'TABLE');

// Work out a type for the column
if (table.rows.length <= 1) return;
var itm = ts_getInnerText(table.rows[1].cells[column]);
sortfn = ts_sort_caseinsensitive;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^[£$]/)) sortfn = ts_sort_currency;
if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;
SORT_COLUMN_INDEX = column;
var firstRow = new Array();
var newRows = new Array();
for (i=0;i<table.rows[0].length;i++) { firstRow[i] =
table.rows[0][i]; }
for (j=1;j<table.rows.length;j++) { newRows[j-1] = table.rows[j]; }

newRows.sort(sortfn);
//alert(s);
if (span.getAttribute("sortdir") == 'down') {
ARROW = '&nbsp;&nbsp;&uarr;';
newRows.reverse();
span.setAttribute('sortdir','up');
} else {
ARROW = '&nbsp;&nbsp;&darr;';
span.setAttribute('sortdir','down');
}

// We appendChild rows that already exist to the tbody, so it moves
them rather than creating new ones
// don't do sortbottom rows
for (i=0;i<newRows.length;i++) {

if (!newRows[i].className || (newRows[i].className &&
(newRows[i].className.indexOf('sortbottom') == -1)))
table.tBodies[0].appendChild(newRows[i]);
}
// do sortbottom rows only
for (i=0;i<newRows.length;i++) {

if (newRows[i].className &&
(newRows[i].className.indexOf('sortbottom') != -1))
table.tBodies[0].appendChild(newRows[i]);

}

// Delete any other arrows there may be showing
var allspans = document.getElementsByTagName("span");
for (var ci=0;ci<allspans.length;ci++) {
if (allspans[ci].className == 'sortarrow') {
if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { //
in the same table as us?
allspans[ci].innerHTML = '&nbsp;&nbsp;&nbsp;';
}
}
}

span.innerHTML = ARROW;
}

function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() ==
pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}
function ts_sort_date(a,b) {
// y2k notes: two digit years less than 50 are treated as 20XX,
greater than 50 are treated as 19XX
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if (aa.length == 10) {
dt1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
} else {
yr = aa.substr(6,2);
if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
dt1 = yr+aa.substr(3,2)+aa.substr(0,2);
}
if (bb.length == 10) {
dt2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
} else {
yr = bb.substr(6,2);
if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
dt2 = yr+bb.substr(3,2)+bb.substr(0,2);
}
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 1;
}

function ts_sort_currency(a,b) {
aa =
ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
bb =
ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
return parseFloat(aa) - parseFloat(bb);
}

function ts_sort_numeric(a,b) {
aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
if (isNaN(aa)) aa = 0;
bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
if (isNaN(bb)) bb = 0;
return aa-bb;
}

function ts_sort_caseinsensitive(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
if (aa==bb) return 0;
if (aa<bb) return -1;
return 1;
}

function ts_sort_default(a,b) {
aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if (aa==bb) return 0;
if (aa<bb) return -1;
return 1;
}
function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
//-------------------
---------------------------- SimpleSample.html ------------

<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<IFRAME
STYLE="display:none;position:absolute;width:149;he ight:185;z-index=100"

ID="CalFrame" MARGINHEIGHT=0 MARGINWIDTH=0 FRAMEBORDER=0
SCROLLING=NO SRC="Calendar.jsp">
</IFRAME>
<head>
<link rel="StyleSheet" type="text/css"
href="resources/css/Project.css">
<SCRIPT language=JavaScript src="SortTable.js"></SCRIPT>
</head>
<body >
<div id="scriptDiv"></div>


<form name="sPPerProductForm" id="newServiceProductForm" method="POST"
action="/PriceList/goToNewSPPerProductAction.do">

<table border=1 class="sortable" id="prodGridTbl">
<tr class=TABLEROWHEADING>
<th class=TEXTLABEL><span>Product Number</span></th>
<th class=TEXTLABEL><span>Product
Description</span></th>
<th class=TEXTLABEL ><span>Associate</span></th>
<th class=TEXTLABEL ><span>Name</span></th>
</tr>
<input type="hidden" id="sortTable" value="true">

<input type="hidden"
name="{actionForm.serviceProductAssociation[0].productId}"
value="110261"/>
<td><span>C5340A</span></td>

<td><span>Digital Camera</span></td>
<td align="center"><input type="hidden"
name="wlw-checkbox_key:{actionForm.serviceProductAssociation[0].isAssociated}OldValue"
value="false" /><input type="checkbox"
name="wlw-checkbox_key:{actionForm.serviceProductAssociation[0].isAssociated}"
checked="true" /></td>
<td><input type=text name="t1" value=""></td>
</tr>
<input type="hidden" id="sortTable" value="true">

<input type="hidden"
name="{actionForm.serviceProductAssociation[1].productId}"
value="1229183"/>
<td><span>EC534AA</span></td>
<td><span>Pavilion t3131.se</span></td>
<td align="center"><input type="hidden"
name="wlw-checkbox_key:{actionForm.serviceProductAssociation[1].isAssociated}OldValue"
value="false" /><input type="checkbox"
name="wlw-checkbox_key:{actionForm.serviceProductAssociation[1].isAssociated}"
/></td>
<td><input type=text name="t2" value="aaa"></td>

</tr>
<input type="hidden" id="sortTable" value="true">

<input type="hidden"
name="{actionForm.serviceProductAssociation[1].productId}"
value="1229183"/>
<td><span>EC534AA</span></td>

<td><span>Pavilion t3131.se</span></td>
<td align="center"><input type="hidden"
name="wlw-checkbox_key:{actionForm.serviceProductAssociation[1].isAssociated}OldValue"
value="false" /><input type="checkbox"
name="wlw-checkbox_key:{actionForm.serviceProductAssociation[1].isAssociated}"
checked="true" /></td>
<td><input type=text name="t3" value=""></td>

</tr>

<input type="hidden" id="sortTable" value="true">

<input type="hidden"
name="{actionForm.serviceProductAssociation[1].productId}"
value="1229183"/>
<td><span>EC534AA</span></td>

<td><span>Pavilion t3131.se</span></td>
<td align="center"><input type="hidden"
name="wlw-checkbox_key:{actionForm.serviceProductAssociation[1].isAssociated}OldValue"
value="false" /><input type="checkbox"
name="wlw-checkbox_key:{actionForm.serviceProductAssociation[1].isAssociated}"
/></td>
<td><input type=text name="t4" value="bbb"></td>

</tr>

</table>

</form>
</body></html>

Oct 28 '05 #1
1 2607
cotton_gear wrote:
Hello,

Fiest of all let me thank this group for so quick in responding to any
postings.
I am using a javascript based utility from a site to sort the columns
of the table. But, for some strange reason it is not working on colmuns
containg checkboxes, text-boxes (or, any user input fileds). For
checkbox column, the values are lost when clicked on the column title
to sort.
I tried a lot to modify but couldnt achive what I wanted.


I think what you want is at:
http://www.eggheadcafe.com/articles/20021022.asp

The Morris stuff rocks.
Good luck.
Ray
Oct 29 '05 #2

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

Similar topics

9
by: SASRS | last post by:
Here is my code. I am trying to see if I can put a %@ LANGUAGE="VBSCRIPT" %> <% FieldA = Request.QueryString("A") FieldB = Request.QueryString("B") FieldC = Request.QueryString("C") ...
12
by: CJM | last post by:
How can I dynamically sort the results from a Stored Procedure? Or more importantly, what is the fastest and most efficient way? I know I can do the sorting within the recordset in ASP, but AFAIK...
2
by: Alan Searle | last post by:
I find that I can display structured data very nicely using XML with an XSL template. As an extra 'goodie', I would like to give users the ability to sort that data (for example with a button...
1
by: Jeremy | last post by:
I want my gird to sort only the items on the current page when I click on a column header. I wrote a little test app, but when I sort it pulls in items from other pages and places them on the current...
1
by: jmdolinger | last post by:
Hi all, I'm a newbie to Atlas (and recently ASP.NET) after coming from a long Java background, also have done quite a bit with an Ajax.NET/ASP.NET 1.1 project, but it was basically all...
6
by: bcochofel | last post by:
I'm using xsl to list an xml file that contains something like: sites, tag and weight. I'm listing this in a table with the following titles: | URL | TAG | WEIGHT (each title his a link) What...
2
by: Simon | last post by:
Hi, I have a table I am populating with data from a DB, and have it sortable on the client side. When the table exceeds around 300 rows, I start running into problems with rendering and sorting...
4
by: Dan Grigore | last post by:
I am creating a table cell by cell (create the table, add columns, create row, add cells to the row) in which I want to add the capability for users to sort ASC and DESC by column header. Can...
5
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...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.