Código:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Sorter</title>
<link rel="stylesheet" href="style.css" />
<script src="jquery-1.2.6.pack.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function (){
//Aqui asignamos el click al elemento <a>
$("table").addClass("sortable");
$("table").attr('id', 'sorter');
});
</script>
<style type="text/css">
* {margin:0; padding:0}
body {font:10px Verdana,Arial}
#wrapper {width:825px; margin:50px auto}
.tabla_a_ordenar {width:823px; border:1px solid #ccc; border-bottom:none}
.tabla_a_ordenar th {padding:4px 6px 6px; background:#444; color:#fff; text-align:left; color:#ccc}
.tabla_a_ordenar td {padding:2px 4px 4px; background:#fff; border-bottom:1px solid #ccc}
.tabla_a_ordenar .head {background:#666 url(Images/sort.gif) 6px center no-repeat; cursor:pointer; padding-left:18px}
.tabla_a_ordenar .desc {background:#600 url(Images/desc.gif) 6px center no-repeat; cursor:pointer; padding-left:18px}
.tabla_a_ordenar .asc {background:#600 url(Images/asc.gif) no-repeat 6px center; cursor:pointer; padding-left:18px}
.tabla_a_ordenar .head:hover, .tabla_a_ordenar .desc:hover, .tabla_a_ordenar .asc:hover {color:#fff}
.tabla_a_ordenar .even td {background:#EDDEDC}
.tabla_a_ordenar .odd td {background:#fff}
</style>
<script language="javascript">
var table=function(){
function sorter(n){
this.n=n; this.t; this.b; this.r; this.d; this.p; this.w; this.a=[]; this.l=0
}
sorter.prototype.init=function(t,f){
this.t=document.getElementById(t);
this.b=this.t.getElementsByTagName('tbody')[0];
this.r=this.b.rows; var l=this.r.length;
for(var i=0;i<l;i++){
if(i==0){
var c=this.r[i].cells; this.w=c.length;
for(var x=0;x<this.w;x++){
if(c[x].className!='nosort'){
c[x].className='head';
c[x].onclick=new Function(this.n+'.work(this.cellIndex)')
}
}
}else{
this.a[i-1]={}; this.l++;
}
}
if(f!=null){
var a=new Function(this.n+'.work('+f+')'); a()
}
}
sorter.prototype.work=function(y){
this.b=this.t.getElementsByTagName('tbody')[0]; this.r=this.b.rows;
var x=this.r[0].cells[y],i;
for(i=0;i<this.l;i++){
this.a[i].o=i+1; var v=this.r[i+1].cells[y].firstChild;
this.a[i].value=(v!=null)?v.nodeValue:''
}
for(i=0;i<this.w;i++){
var c=this.r[0].cells[i];
if(c.className!='nosort'){c.className='head'}
}
if(this.p==y){
this.a.reverse(); x.className=(this.d)?'asc':'desc';
this.d=(this.d)?false:true
}else{
this.p=y; this.a.sort(compare); x.className='asc'; this.d=false
}
var n=document.createElement('tbody');
n.appendChild(this.r[0]);
for(i=0;i<this.l;i++){
var r=this.r[this.a[i].o-1].cloneNode(true);
n.appendChild(r); r.className=(i%2==0)?'even':'odd'
}
this.t.replaceChild(n,this.b)
}
function compare(f,c){
f=f.value,c=c.value;
var i=parseFloat(f.replace(/(\$|\,)/g,'')),n=parseFloat(c.replace(/(\$|\,)/g,''));
if(!isNaN(i)&&!isNaN(n)){f=i,c=n}
return (f>c?1:(f<c?-1:0))
}
return{sorter:sorter}
}();
</script>
</head>
<body>
<div id="wrapper">
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<th>ID</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>City</th>
<th>State</th>
<th>Zip Code</th>
</tr>
<tr>
<td>1</td>
<td>Kaseem Huber</td>
<td>(587) 117-5521</td>
<td>[email protected]</td>
<td>Burlington</td>
<td>DE</td>
<td>81070</td>
</tr>
<tr>
<td>2</td>
<td>Oleg Michael</td>
<td>(539) 184-8550</td>
<td>[email protected]</td>
<td>Covina</td>
<td>SC</td>
<td>48758</td>
</tr>
<tr>
<td>3</td>
<td>Kibo Ochoa</td>
<td>(837) 601-9918</td>
<td>[email protected]</td>
<td>Placentia</td>
<td>UT</td>
<td>09075</td>
</tr>
</table>
</div>
<script type="text/javascript">
var sorter=new table.sorter("sorter");
sorter.init("sorter",1);
</script>
</body>
</html>
Yo pongo cambio lo subrayado por <table cellpadding="0" cellspacing="0" border="0" id="sorter"> y quito lo de $("table").attr('id', 'sorter');
funciona perfectamente. Es que me estoy aqui ya volviendo loco y nos se que probar.
GRACIAS POR LAS RESPUESTAS