Javascript Examples :: View topic

sireesha264 · 14 Jan 2008

Hi Friends,

I am having html table , To reduce the table length I am deviding table in to two parts,and displaying my records as follows rather than using scroll bar.
Empno Ename Empno Ename
1 A 2 u
3 x 4 Y
5 t 6 B

then I am applying javascript for table sorting,but sorting is happening in row wise like above.

My requirement is sorting should happen in column wise
as follows

Empno Ename Empno Ename
1 A 4 u
2 x 5 Y
3 t 6 B

I am using javascript from the following link for sorting
http://www.kryogenix.org/code/browser/sorttable/

Any one please give me the code for coulumn wise sorting.

Thanks in advance.

vwphillips · 07 Feb 2004

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcSortTable(zxcid,zxccnus){
var zxcargs=zxcSortTable.arguments
var zxctable=document.getElementById(zxcid);
var zxcrows=zxctable.rows;
var zxcscells=[];
var zxcclones=[];
for (var zxc0=1;zxc0<zxcargs.length;zxc0++){
for (var zxc0a=1;zxc0a<zxcrows.length;zxc0a++){
var zxccells=zxcrows[zxc0a].cells;
zxcscells.push(zxccells[zxcargs[zxc0]]);
zxcclones.push(zxccells[zxcargs[zxc0]].cloneNode(true));
}
}
if (!zxcrows[0].cells[zxcargs[1]].ud) zxcrows[0].cells[zxcargs[1]].ud='Up';
zxcrows[0].cells[zxcargs[1]].ud=(zxcrows[0].cells[zxcargs[1]].ud=='Up')?'Down':'Up';
zxcclones=zxcclones.sort(zxcSortTxt);
if (zxcrows[0].cells[zxcargs[1]].ud=='Up') zxcclones=zxcclones.reverse();
for (var zxc1=0;zxc1<zxcclones.length;zxc1++){
zxcscells[zxc1].parentNode.replaceChild(zxcclones[zxc1],zxcscells[zxc1]);
}
}

function zxcSortTxt(zxca,zxcb){
var zxcaa=zxca.firstChild.data;
var zxcbb=zxcb.firstChild.data;
if (zxcaa>zxcbb) return 1;
if (zxcaa<zxcbb) return -1;
return 0;
}

/*]]>*/
</script>
</head>

<body>
Is this the sort of thing you are looking for?<br />
<table id="tst" width="200" border="1">
<tr>
<td onclick="zxcSortTable('tst',0,2);" >Empno</td>
<td onclick="zxcSortTable('tst',1,3);">Ename</td>
<td onclick="zxcSortTable('tst',0,2);">Empno</td>
<td onclick="zxcSortTable('tst',1,3);">Ename</td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>2</td>
<td>u</td>
</tr>
<tr>
<td>3</td>
<td>x</td>
<td>4</td>
<td>Y</td>
</tr>
<tr>
<td>5</td>
<td>t</td>
<td>6</td>
<td>B</td>
</tr>
</table>
</body>

</html>

sireesha264 · 14 Jan 2008

Hi your code is working fine ,but i am having empty row as follows
<body>
Is this the sort of thing you are looking for?<br />
<table id="tst" width="200" border="1">
<tr>
<td onclick="zxcSortTable('tst',0,2);" >Empno</td>
<td onclick="zxcSortTable('tst',1,3);">Ename</td>
<td onclick="zxcSortTable('tst',0,2);">Empno</td>
<td onclick="zxcSortTable('tst',1,3);">Ename</td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>2</td>
<td>u</td>
</tr>
<tr>
<td>3</td>
<td>x</td>
<td>4</td>
<td>Y</td>
</tr>
<tr>
<td>5</td>
<td>t</td>
<td>6</td>
<td>B</td>
</tr>
<tr>
<td>7</td>
<td>i</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

I dont want sort empty cells,that empty cells should be in its place,
how to do it,can you give any idea

vwphillips · 07 Feb 2004

missed this post but better late than never?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcSortTable(zxcid,zxccnus){
var zxcargs=zxcSortTable.arguments
var zxctable=document.getElementById(zxcid);
var zxcrows=zxctable.rows,zxcscells=[],zxcclones=[],zxcblanks=[],zxccnt=0;
for (var zxc0=1;zxc0<zxcargs.length;zxc0++){
for (var zxc0a=1;zxc0a<zxcrows.length;zxc0a++){
var zxccells=zxcrows[zxc0a].cells;
zxcscells.push(zxccells[zxcargs[zxc0]]);
var zxcdata=zxccells[zxcargs[zxc0]].firstChild.data;
if (/[a-z]|[0-9]/i.test(zxcdata)){
zxcclones[zxccnt]=(zxccells[zxcargs[zxc0]].cloneNode(true));
zxcclones[zxccnt++].data=zxcdata;
}
else{
zxcblanks.push(zxccells[zxcargs[zxc0]].cloneNode(true));
}
}
}
if (!zxcrows[0].cells[zxcargs[1]].ud) zxcrows[0].cells[zxcargs[1]].ud='Up';
zxcrows[0].cells[zxcargs[1]].ud=(zxcrows[0].cells[zxcargs[1]].ud=='Up')?'Down':'Up';
zxcclones=zxcclones.sort(zxcSortTxt);
if (zxcrows[0].cells[zxcargs[1]].ud=='Up') zxcclones=zxcclones.reverse();
zxcclones=zxcclones.concat(zxcblanks);
for (var zxc1=0;zxc1<zxcclones.length;zxc1++){
zxcscells[zxc1].parentNode.replaceChild(zxcclones[zxc1],zxcscells[zxc1]);
}
}

function zxcSortTxt(zxca,zxcb){
var zxcaa=zxca.firstChild.data;
var zxcbb=zxcb.firstChild.data;
if (zxcaa>zxcbb) return 1;
if (zxcaa<zxcbb) return -1;
return 0;
}

/*]]>*/
</script>
</head>

<body>
Is this the sort of thing you are looking for?<br />
<table id="tst" width="200" border="1">
<tr>
<td onclick="zxcSortTable('tst',0,2);" >Empno</td>
<td onclick="zxcSortTable('tst',1,3);">Ename</td>
<td onclick="zxcSortTable('tst',0,2);">Empno</td>
<td onclick="zxcSortTable('tst',1,3);">Ename</td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>2</td>
<td>u</td>
</tr>
<tr>
<td>3</td>
<td>x</td>
<td>4</td>
<td>Y</td>
</tr>
<tr>
<td>5</td>
<td>t</td>
<td>6</td>
<td>B</td>
</tr>
<tr>
<td>7</td>
<td>i</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>

</html>

sireesha264 · 14 Jan 2008

Hi,

How can i add up arow and down icons to theads while sorting.
If asening up arow and if descending down arow like that.
can you give me an idea.

Thanks in advance

vwphillips · 07 Feb 2004

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcSortTable(zxcid,zxccnus){
var zxcargs=zxcSortTable.arguments
var zxctable=document.getElementById(zxcid);
var zxcrows=zxctable.rows,zxcscells=[],zxcclones=[],zxcblanks=[],zxccnt=0;
for (var zxc0=1;zxc0<zxcargs.length;zxc0++){
for (var zxc0a=1;zxc0a<zxcrows.length;zxc0a++){
var zxccells=zxcrows[zxc0a].cells;
zxcscells.push(zxccells[zxcargs[zxc0]]);
var zxcdata=zxccells[zxcargs[zxc0]].firstChild.data;
if (/[a-z]|[0-9]/i.test(zxcdata)){
zxcclones[zxccnt]=(zxccells[zxcargs[zxc0]].cloneNode(true));
zxcclones[zxccnt++].data=zxcdata;
}
else{
zxcblanks.push(zxccells[zxcargs[zxc0]].cloneNode(true));
}
}
}
if (!zxcrows[0].cells[zxcargs[1]].ud) zxcrows[0].cells[zxcargs[1]].ud='Up';
zxcrows[0].cells[zxcargs[1]].ud=(zxcrows[0].cells[zxcargs[1]].ud=='Up')?'Down':'Up';
zxcclones=zxcclones.sort(zxcSortTxt);
if (zxcrows[0].cells[zxcargs[1]].ud=='Up') zxcclones=zxcclones.reverse();
zxcclones=zxcclones.concat(zxcblanks);
for (var zxc1=0;zxc1<zxcclones.length;zxc1++){
zxcscells[zxc1].parentNode.replaceChild(zxcclones[zxc1],zxcscells[zxc1]);
}
for (var zxc2=1;zxc2<zxcargs.length;zxc2++){
zxcrows[0].cells[zxcargs[zxc2]].getElementsByTagName('IMG')[0].src=(zxcrows[0].cells[zxcargs[1]].ud=='Up')?'http://www.vicsjavascripts.org.uk/StdImages/down[1].gif':'http://www.vicsjavascripts.org.uk/StdImages/up[1].gif';
}
}

function zxcSortTxt(zxca,zxcb){
var zxcaa=zxca.firstChild.data;
var zxcbb=zxcb.firstChild.data;
if (zxcaa>zxcbb) return 1;
if (zxcaa<zxcbb) return -1;
return 0;
}

/*]]>*/
</script>
</head>

<body>
Is this the sort of thing you are looking for?<br />
<table id="tst" border="1">
<tr>
<td width="100" onclick="zxcSortTable('tst',0,2);" >Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',1,3);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',0,2);">Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',1,3);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>2</td>
<td>u</td>
</tr>
<tr>
<td>3</td>
<td>x</td>
<td>4</td>
<td>Y</td>
</tr>
<tr>
<td>5</td>
<td>t</td>
<td>6</td>
<td>B</td>
</tr>
<tr>
<td>7</td>
<td>i</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>

</html>[quote][/quote]

sireesha264 · 14 Jan 2008

Hi vwphillips,

first of all thank you very much for your help ,the code you had given is working very fine.

can you give me an idea How to sort date fields.
for example i am having table as follows

<body>
Is this the sort of thing you are looking for?<br />
<table id="tst" border="1">
<tr>
<td width="100" onclick="zxcSortTable('tst',0,2);" >Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',1,3);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',0,2);">Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',1,3);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>12/24/2007</td>
<td>2</td>
<td>u</td>
<td>02/24/2006</td>

</tr>
<tr>
<td>3</td>
<td>x</td>
<td>09/24/2005</td>
<td>4</td>
<td>Y</td>
<td>10/27/2008</td>
</tr>
<tr>
<td>5</td>
<td>t</td>
<td>07/27/2001</td>
<td>6</td>
<td>B</td>
<td>10/27/2009</td>
</tr>
<tr>
<td>7</td>
<td>i</td>
<td>01/27/2008</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>

what javascript code i need to add.

If i am giving troble to you very sorry.

Thanks in adavance.

vwphillips · 07 Feb 2004

Not sure I understand

but line

Code:

zxcclones=zxcclones.sort(zxcSortTxt);

sorts the cells stored in zxcclones using the function

Code:

function zxcSortTxt(zxca,zxcb){
var zxcaa=zxca.firstChild.data;
var zxcbb=zxcb.firstChild.data;
if (zxcaa>zxcbb) return 1;
if (zxcaa<zxcbb) return -1;
return 0;
}

this function sorts by the cells by .firstChild.data

but any valid criteria can be specified

just noticed you defined date, be back later

vwphillips · 07 Feb 2004

To save formating the date it is easiest to use a hidden text input
This is true of all sorting types as you may need to have tags in the cell.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcSortTable(zxcid,zxccnus,zxctype){
zxctype=zxctype||'std';
var zxcargs=zxcSortTable.arguments
var zxctable=document.getElementById(zxcid);
var zxcrows=zxctable.rows,zxcscells=[],zxcclones=[],zxcblanks=[],zxccnt=0;
for (var zxc0=0;zxc0<zxccnus.length;zxc0++){
for (var zxc0a=1;zxc0a<zxcrows.length;zxc0a++){
var zxccells=zxcrows[zxc0a].cells;
zxcscells.push(zxccells[zxccnus[zxc0]]);
var zxcdata=zxccells[zxccnus[zxc0]].firstChild.data;
if (/[a-z]|[0-9]/i.test(zxcdata)){
zxcclones[zxccnt]=(zxccells[zxccnus[zxc0]].cloneNode(true));
zxcclones[zxccnt++].data=(zxctype=='std')?zxcdata:zxccells[zxccnus[zxc0]].getElementsByTagName('INPUT')[0].value;
}
else{
zxcblanks.push(zxccells[zxccnus[zxc0]].cloneNode(true));
}
}
}
if (!zxcrows[0].cells[zxccnus[0]].ud) zxcrows[0].cells[zxccnus[0]].ud='Up';
zxcrows[0].cells[zxccnus[0]].ud=(zxcrows[0].cells[zxccnus[0]].ud=='Up')?'Down':'Up';
zxcclones=zxcclones.sort(zxcSortTxt);
if (zxcrows[0].cells[zxccnus[0]].ud=='Up') zxcclones=zxcclones.reverse();
zxcclones=zxcclones.concat(zxcblanks);
for (var zxc1=0;zxc1<zxcclones.length;zxc1++){
zxcscells[zxc1].parentNode.replaceChild(zxcclones[zxc1],zxcscells[zxc1]);
}
for (var zxc2=0;zxc2<zxccnus.length;zxc2++){
zxcrows[0].cells[zxccnus[zxc2]].getElementsByTagName('IMG')[0].src=(zxcrows[0].cells[zxccnus[0]].ud=='Up')?'http://www.vicsjavascripts.org.uk/StdImages/down[1].gif':'http://www.vicsjavascripts.org.uk/StdImages/up[1].gif';
}
}

function zxcSortTxt(zxca,zxcb){
var zxcaa=zxca.data;
var zxcbb=zxcb.data;
if (zxcaa>zxcbb) return 1;
if (zxcaa<zxcbb) return -1;
return 0;
}

/*]]>*/
</script>
</head>

<body>
Is this the sort of thing you are looking for?<br />
<table id="tst" border="1">
<tr>
<td width="100" onclick="zxcSortTable('tst',[0,3]);" >Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',[1,4]);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',[2,5],'date');">Date<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',[0,3]);">Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',[1,4]);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',[2,5],'date');">Date<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td><input type="hidden" value="20080101" />1-Jan-2008</td>
<td>2</td>
<td>u</td>
<td><input type="hidden" value="20080110" />10-Jan-2008</td>
</tr>
<tr>
<td>3</td>
<td>x</td>
<td><input type="hidden" value="20080121" />21-Jan-2008</td>
<td>4</td>
<td>Y</td>
<td><input type="hidden" value="20080111" />11-Jan-2008</td>
</tr>
<tr>
<td>5</td>
<td>t</td>
<td><input type="hidden" value="20080115" />15-Jan-2008</td>
<td>6</td>
<td>B</td>
<td><input type="hidden" value="20080102" />2-Jan-2008</td>
</tr>
<tr>
<td>7</td>
<td>i</td>
<td><input type="hidden" value="20080104" />4-Jan-2008</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>

</html>

I you realy need the sort without the inputs say.

sireesha264 · 14 Jan 2008

Hi friend,

I am having n number of records,I can't define hidden value n times,and also my date formate may change in future from mm/dd/yyyy to dd/mm/yyyy.

Please give me another idea.

I am having following methods.but i don't know how to call them in our function zxcSortTable()

Is this code help full.

please give me an idea.

possdate = text.match(/^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/);
if (possdate) {
// looks like a date
first = parseInt(possdate[1]);
second = parseInt(possdate[2]);
if (first > 12) {
// definitely dd/mm
} else if (second > 12) {
return sorttable.sort_mmdd;
} else {
// looks like a date, but we can't tell which, so assume
// that it's dd/mm (English imperialism!) and keep looking
sortfn = sorttable.sort_ddmm;
}
}

method for dd/mm/yyyy formate

sort_ddmm: function(a,b) {
mtch = a[0].match(/^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/);
y = mtch[3]; m = mtch[2]; d = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt1 = y+m+d;
mtch = b[0].match(sorttable.DATE_RE);
y = mtch[3]; m = mtch[2]; d = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt2 = y+m+d;
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 1;
}

method for mm/dd/yyyy formate
sort_mmdd: function(a,b) {
mtch = a[0].match(/^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/);
y = mtch[3]; d = mtch[2]; m = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt1 = y+m+d;
mtch = b[0].match(sorttable.DATE_RE);
y = mtch[3]; d = mtch[2]; m = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt2 = y+m+d;
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 1;
}

waiting for ur reply

sireesha264 · 14 Jan 2008

Hi vwphilips,

Please give me an idea for sorting date with out inputs,because i am having n number of records and date formate would be mm/dd/yyyy or dd/mm/yyyy.

thank you very much for your help.

vwphillips · 07 Feb 2004

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key1 in zxcstyle){
document.Show.Show1.value=key1;

zxcele.style[key1]=zxcstyle[key1]; }

if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}
function zxcMonth(zxcm){
var zxcmonths={jan:'01',feb:'02',mar:'03',apr:'04',may:'05',jun:'06',jul:'07',aug:'08',sep:'09',nov:'11',dec:'12'};
for (key1 in zxcmonths){
if (key1==zxcm) return zxcmonths[key1];
}
}

function zxcSortTable(zxcid,zxccnus,zxctype){
zxctype=zxctype||'std';
zxcES('DIV',{'width':'0px'});
var zxcargs=zxcSortTable.arguments
var zxctable=document.getElementById(zxcid);
var zxcrows=zxctable.rows,zxcscells=[],zxcclones=[],zxcblanks=[],zxccnt=0;
var zxcmonths={jan:'01',feb:'02',mar:'03',apr:'04',may:'05',jun:'06',jul:'07',aug:'08',sep:'09',nov:'11',dec:'12'};
for (var zxc0=0;zxc0<zxccnus.length;zxc0++){
for (var zxc0a=1;zxc0a<zxcrows.length;zxc0a++){
var zxccells=zxcrows[zxc0a].cells;
zxcscells.push(zxccells[zxccnus[zxc0]]);
var zxcdata=zxccells[zxccnus[zxc0]].firstChild.data;
if (/[a-z]|[0-9]/i.test(zxcdata)){
zxcclones[zxccnt]=(zxccells[zxccnus[zxc0]].cloneNode(true));
if (zxctype=='dd/mm/yyyy'||zxctype=='mm/dd/yyyy'||zxctype=='dd/mmm/yyyy'||zxctype=='mmm/dd/yyyy'){
var zxcsep=zxcdata.charAt(zxcdata.length-5);
zxcdata=zxcdata=zxcdata.split(zxcsep)[2]+((zxctype.match('mmm'))?zxcmonths[zxcdata.split(zxcsep)[(zxctype=='dd/mmm/yyyy')?1:0].toLowerCase().substring(0,3)]:zxcdata.split(zxcsep)[(zxctype.charAt(0)=='m')?0:1])+(zxcdata.split(zxcsep)[(zxctype.charAt(0)=='d')?0:1]);//zxcdata.split(zxcsep).reverse().join('');
}
zxcclones[zxccnt++].data=zxcdata;
}
else zxcblanks.push(zxccells[zxccnus[zxc0]].cloneNode(true));
}
}
if (!zxcrows[0].cells[zxccnus[0]].ud) zxcrows[0].cells[zxccnus[0]].ud='Up';
zxcrows[0].cells[zxccnus[0]].ud=(zxcrows[0].cells[zxccnus[0]].ud=='Up')?'Down':'Up';
zxcclones=zxcclones.sort(zxcSortTxt);
if (zxcrows[0].cells[zxccnus[0]].ud=='Up') zxcclones=zxcclones.reverse();
zxcclones=zxcclones.concat(zxcblanks);
for (var zxc1=0;zxc1<zxcclones.length;zxc1++) zxcscells[zxc1].parentNode.replaceChild(zxcclones[zxc1],zxcscells[zxc1]);
for (var zxc2=0;zxc2<zxccnus.length;zxc2++) zxcrows[0].cells[zxccnus[zxc2]].getElementsByTagName('IMG')[0].src=(zxcrows[0].cells[zxccnus[0]].ud=='Up')?'http://www.vicsjavascripts.org.uk/StdImages/down[1].gif':'http://www.vicsjavascripts.org.uk/StdImages/up[1].gif';
}

function zxcSortTxt(zxca,zxcb){
var zxcaa=zxca.data;
var zxcbb=zxcb.data;
if (zxcaa>zxcbb) return 1;
if (zxcaa<zxcbb) return -1;
return 0;
}

/*]]>*/
</script>
</head>

<body>
Is this the sort of thing you are looking for?<br />
'dd/mm/yyyy'
<br />
<table id="tst" border="1">
<tr>
<td width="100" onclick="zxcSortTable('tst',[0,3]);" >Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',[1,4]);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',[2,5],'dd/mm/yyyy');">Date<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',[0,3]);">Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',[1,4]);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst',[2,5],'dd/mm/yyyy');">Date<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>01-01-2008</td>
<td>2</td>
<td>u</td>
<td>10-02-2008</td>
</tr>
<tr>
<td>3</td>
<td>x</td>
<td>21-01-2008</td>
<td>4</td>
<td>Y</td>
<td>11-01-2008</td>
</tr>
<tr>
<td>5</td>
<td>t</td>
<td>15-01-2008</td>
<td>6</td>
<td>B</td>
<td>02-01-2008</td>
</tr>
<tr>
<td>7</td>
<td>i</td>
<td>04-01-2008</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br />
'mm/dd/yyyy'
<br />
<table id="tst1" border="1">
<tr>
<td width="100" onclick="zxcSortTable('tst1',[0,3]);" >Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst1',[1,4]);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst1',[2,5],'mm/dd/yyyy');">Date<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst1',[0,3]);">Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst1',[1,4]);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst1',[2,5],'mm/dd/yyyy');">Date<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>01/01/2008</td>
<td>2</td>
<td>u</td>
<td>02/10/2008</td>
</tr>
<tr>
<td>3</td>
<td>x</td>
<td>01/21/2008</td>
<td>4</td>
<td>Y</td>
<td>01/11/2008</td>
</tr>
<tr>
<td>5</td>
<td>t</td>
<td>01/15/2008</td>
<td>6</td>
<td>B</td>
<td>01/02/2008</td>
</tr>
<tr>
<td>7</td>
<td>i</td>
<td>01/04/2008</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br />
'dd/mmm/yyyy'
<br />
<table id="tst2" border="1">
<tr>
<td width="100" onclick="zxcSortTable('tst2',[0,3]);" >Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst2',[1,4]);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst2',[2,5],'dd/mmm/yyyy');">Date<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst2',[0,3]);">Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst2',[1,4]);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst2',[2,5],'dd/mmm/yyyy');">Date<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>01:Feb:2008</td>
<td>2</td>
<td>u</td>
<td>10:Jan:2008</td>
</tr>
<tr>
<td>3</td>
<td>x</td>
<td>21:Jan:2008</td>
<td>4</td>
<td>Y</td>
<td>11:Jan:2008</td>
</tr>
<tr>
<td>5</td>
<td>t</td>
<td>15:Jan:2008</td>
<td>6</td>
<td>B</td>
<td>02:Jan:2008</td>
</tr>
<tr>
<td>7</td>
<td>i</td>
<td>04:Jan:2008</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table id="tst4" border="1">
<tr>
<br />
'mmm/dd/yyyy'
<br />
<td width="100" onclick="zxcSortTable('tst4',[0,3]);" >Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst4',[1,4]);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst4',[2,5],'mmm/dd/yyyy');">Date<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst4',[0,3]);">Empno<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst4',[1,4]);">Ename<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
<td width="100" onclick="zxcSortTable('tst4',[2,5],'mmm/dd/yyyy');">Date<img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" /></td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>January-01-2008</td>
<td>2</td>
<td>u</td>
<td>Febuary-10-2008</td>
</tr>
<tr>
<td>3</td>
<td>x</td>
<td>January-21-2008</td>
<td>4</td>
<td>Y</td>
<td>January-11-2008</td>
</tr>
<tr>
<td>5</td>
<td>t</td>
<td>January-15-2008</td>
<td>6</td>
<td>B</td>
<td>January-02-2008</td>
</tr>
<tr>
<td>7</td>
<td>i</td>
<td>January-04-2008</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>

</html>

sireesha264 · 14 Jan 2008

Hi vwphillips,

just for understanding erlier i had given that table.the code is working very fine for that example.The previous exaple is similar to my table only difference is i am getting values from my java object.

I applied your code to my actual table in my project,sorting is not happening sometimes,sometimes it is happening row wise,not in column wise,
that means
record1 recorde2
record3 record4
record5 record6
Like this happening

but it sould happen like as follows
record1 record4
recor2 record5
record3 record6

If you sort out the problem it would be very help full to me.

My actual table is as follows.
<table id="tst" border="1" width="100%" align="left" cellpadding="0" cellspacing="1" style="font: 8pt Verdana,sans-serif;">
<tr>
<td bgcolor="#87a7ce" align="left"> </td>
<td bgcolor="#87a7ce" align="left"> </td>
<td onclick="zxcSortTable('tst',[2,9]);" bgcolor="#87a7ce" align="left"><b><font size="2" face="Trebuchet MS" color="white">TestCase Name<image src="images/down.gif" /></font></b></td>
<td onclick="zxcSortTable('tst',[3,10],'mm/dd/yyyy');" bgcolor="#87a7ce" align="left"><b><font size="2" face="Trebuchet MS" color="white">Created Date<image src="images/down.gif" /></font></b></td>
<td onclick="zxcSortTable('tst',[4,11]);" bgcolor="#87a7ce" align="left"><b><font size="2" face="Trebuchet MS" color="white">Created By<image src="images/down.gif" /></font></b></td>
<td bgcolor="#87a7ce" align="left"> </td>
<td bgcolor="#ffffff" align="center">  </td>
<td bgcolor="#87a7ce" align="left"> </td>
<td bgcolor="#87a7ce" align="left"> </td>
<td onclick="zxcSortTable('tst',[2,9]);" bgcolor="#87a7ce" align="left"><b><font size="2" face="Trebuchet MS" color="white">TestCase Name</font></b><image src="images/down.gif" /></font></b></td>
<td onclick="zxcSortTable('tst',[3,10],'mm/dd/yyyyy');" bgcolor="#87a7ce" align="left"><b><font size="2" face="Trebuchet MS" color="white">Created Date</font></b><image src="images/down.gif" /></font></b></td>
<td onclick="zxcSortTable('tst',[4,11]);" bgcolor="#87a7ce" align="left"><b><font size="2" face="Trebuchet MS" color="white">Created By</font></b><image src="images/down.gif" /></font></b></td>
<td bgcolor="#87a7ce" align="left"> </td>
</tr>
<%
int counter = -1;
int valCounter = -1;
Iterator itr1 = sessionData.testCasesData.testCaseMap.keySet().iterator();
while (itr1.hasNext()) {
counter++;
valCounter++;
if(counter==0){
%>
<tr>
<%
}
if (counter < 2) {
testCase = (String) itr1.next();
TestCasesData.TestCaseData testCaseData = (TestCasesData.TestCaseData) sessionData.testCasesData.testCaseMap.get(testCase);

%>
<td bgcolor="#b6cef8" align="center">
<a href="javascript:showTree(searchForm,'<%=testCase%>','TREE');" title="View Tree">
<img src="images/nolines_plus.gif" width="22" height="22" border="0" title="View Tree Versions">
</a>
</td>

<td bgcolor="#d5eaff" align="center">
<a href="javascript:showTree(searchForm,'<%=testCase%>','');" title="View Tree">
<img src="images/folderopen.gif" width="20" height="20" border="0" title="View Versions">
</a>
</td>

<td bgcolor="#b3d9ff" align="left">
<font size="2" face="Trebuchet MS" color="#0000A0">
<a href="javascript:getLatestTestCase(searchForm,'<%=testCase%>');" title="Get Latest TestCase">
<input type="hidden" name=<%= TestCasesData.VIEW_TEST_CASE %><%= valCounter %> value="<%= testCase %>"><%= testCase %>
</a>
</font>
</td>
<td bgcolor="#a8cfff" align="left"><font size="2" face="Trebuchet MS" color="#0000A0"> <%=testCaseData.createdDate%></font></td>
<td bgcolor="#bfdfff" align="left"><font size="2" face="Trebuchet MS" color="#0000A0"> <%=testCaseData.createdUser%></font></td>
<td bgcolor="#d5eaff" align="center">
<a href="javascript:deleteTestCase(searchForm,'<%=testCase%>');" title="DeleteTestCase"><img src="images/delete.gif" width="20" height="20" border="0" title="Delete TestCase">
</a>
</td>
<%
if (counter < 1) {
%>

<td bgcolor="#ffffff" align="center">  </td>
<%
}
if (!(itr1.hasNext())) {
while (counter < 1) {
%>

<td bgcolor="#b6cef8"> </td>
<td bgcolor="#d5eaff"> </td>
<td bgcolor="#b3d9ff"> </td>
<td bgcolor="#a8cfff"> </td>
<td bgcolor="#bfdfff"> </td>
<td bgcolor="#d5eaff"> </td>
<%
counter++;
}
}
%>
<%

} else {
counter = -1;

%>

</tr>
<%
}
}
%>

</table>

please do the needfull.

vwphillips · 07 Feb 2004

I will need a pure HTML code example of your table to assist any further.

sireesha264 · 14 Jan 2008

Hi friend,

I wanted to sort date fields which are having following formate
mm/dd/yyy hh:mm:ss

Please give me code for this