A ver, prueba con esto:
Código HTML:
<html>
<head><title></title>
<style type="text/css">
/* tabla HTML */
table.sort{
border-spacing:0.1em;
margin-bottom:1em;
margin-top:1em
}
/* celdas de la tabla */
table.sort td{
border:1px solid #CCCCCC;
padding:0.3em 1em
}
/* titulos de la tabla */
table.sort thead td{
cursor:pointer;
cursor:hand;
font-weight:bold;
text-align:center;
vertical-align:middle
}
/* titulo de la columna ordenada */
table.sort thead td.curcol{
background-color:#999999;
color:#FFFFFF
}
</style>
<script type="text/javascript">
<!--
/*
originally written by paul sowden <[email protected]> | http://idontsmoke.co.uk
modified and localized by alexander shurkayev <[email protected]> | http://htmlcoder.visions.ru
*/
var img_dir = "/localfolder/images/"; // carpeta para 0.gif y 1.gif
// Esta funcion convierte fechas y numeros para el array apropiado clasificando en la funcion sort.
function setDataType(cValue)
{
var isDate = new Date(cValue);
if (isDate == "NaN")
{
if (isNaN(cValue)) //El valor es un string, pone todos los caracteres en upper case(mayusculas) para asegurar un correcto
// ordenamiento de la a - z.
{
alert(cValue)
cValue = cValue.toUpperCase();
return cValue;
}
else // si el valor es un numero, para prevenir el ordenamiento string de un numero se le agrega un digito adicional q es
// la suma del largo del numero cuando es un string.
{
var myNum;
myNum = String.fromCharCode(48 + cValue.length) + cValue;
return myNum;
}
}
else
{
// si el valor a ordenar es una fecha, remueve toda la puntuacion y retorna un numero string
//BUG - STRING AND NOT NUMERICAL SORT .....
// ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5 etc.)
var myDate = new String();
myDate = isDate.getFullYear() + " " ;
myDate = myDate + isDate.getMonth() + " ";
myDate = myDate + isDate.getDate(); + " ";
myDate = myDate + isDate.getHours(); + " ";
myDate = myDate + isDate.getMinutes(); + " ";
myDate = myDate + isDate.getSeconds();
//myDate = String.fromCharCode(48 + myDate.length) + myDate;
return myDate ;
}
}
// funcion extrae todo el texto de los nodos hijos
function getConcatenedTextContent(node) {
var _result = "";
if (node == null) {
return _result;
}
var childrens = node.childNodes;
var i = 0;
while (i < childrens.length) {
var child = childrens.item(i);
switch (child.nodeType) {
case 1: // ELEMENT_NODE
case 5: // ENTITY_REFERENCE_NODE
_result += getConcatenedTextContent(child);
break;
case 3: // TEXT_NODE
case 2: // ATTRIBUTE_NODE
case 4: // CDATA_SECTION_NODE
_result += child.nodeValue;
break;
case 6: // ENTITY_NODE
case 7: // PROCESSING_INSTRUCTION_NODE
case 8: // COMMENT_NODE
case 9: // DOCUMENT_NODE
case 10: // DOCUMENT_TYPE_NODE
case 11: // DOCUMENT_FRAGMENT_NODE
case 12: // NOTATION_NODE
// skip
break;
}
i++;
}
return _result;
}
// para la ordenacion
var up = false;
// funcion principal
function sort(e) {
var el = window.event ? window.event.srcElement : e.currentTarget;
if (el.tagName == "IMG") el = el.parentNode;
var a = new Array();
var name = el.lastChild.nodeValue;
var dad = el.parentNode;
var node, arrow, curcol;
/*solo se verifica la columna 3 y 4. En otras palabras, desde la columna 3 hasta el final*/
for (var i = 2; (node = dad.getElementsByTagName("td").item(i)); i++) {
if (node.lastChild.nodeValue == name){
curcol = i;
if (node.className == "curcol"){
arrow = node.firstChild;
up = Number(!up);
arrow.src = img_dir + up + ".gif";
}else{
node.className = "curcol";
arrow = node.insertBefore(document.createElement("img"),node.firstChild);
up = false;
arrow.src = img_dir + Number(up) + ".gif";
}
}else{
if (node.className == "curcol"){
node.className = "";
if (node.firstChild) node.removeChild(node.firstChild);
}
}
}
var tbody = dad.parentNode.parentNode.getElementsByTagName("tbody").item(0);
for (var i = 0; (node = tbody.getElementsByTagName("tr").item(i)); i++) {
a[i] = new Array();
a[i][0] = getConcatenedTextContent(node.getElementsByTagName("td").item(curcol));
a[i][0] = setDataType(a[i][0]); //uso de la funcion insertada en este script
a[i][1] = getConcatenedTextContent(node.getElementsByTagName("td").item(1));
a[i][2] = getConcatenedTextContent(node.getElementsByTagName("td").item(0));
a[i][3] = node;
}
a.sort();
if (up) a.reverse();
for (var i = 0; i < a.length; i++) {
tbody.appendChild(a[i][3]);
}
}
// funcion de inicializacion de todo el proceso
function init(e) {
if (!document.getElementsByTagName) return;
var thead = document.getElementsByTagName("thead").item(0);
var node; /*i=2 para ordenar solo la columna 3 y 4. Si quieres que ordene todas las columnas, pon 0*/
for (var i = 2; (node = thead.getElementsByTagName("td").item(i)); i++) {
if (node.addEventListener) node.addEventListener("click", sort, false);
else if (node.attachEvent) node.attachEvent("onclick",sort);
node.title = "Haga click para ordenar la columna";
}
thead.getElementsByTagName("td").item(3).click(); // se simula un click en la 4ta colummna. En NN6/Mozilla no funciona.
}
// se ejecuta la funcion init() cuando ocurre el evento Load
var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;
if (root){
if (root.addEventListener) root.addEventListener("load", init, false);
else if (root.attachEvent) root.attachEvent("onload", init);
}
//-->
</script>
</head>
<body>
<table class="sort" align="center">
<thead>
<tr>
<td>Id Grabacion</td>
<td>Id Ejecutivo</td>
<td>Fecha grabacion</td>
<td>Duracion grabacion</td>
</tr>
</thead>
<tbody>
<tr>
<td>G01</td>
<td>E01</td>
<td>15-11-2005</td>
<td>8</td>
</tr>
<tr>
<td>G02</td>
<td>E02</td>
<td>01-12-2005</td>
<td>7</td>
</tr>
<tr>
<td>G03</td>
<td>E03</td>
<td>11-11-2005</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>