Estoy buscando un script para poder ordenar los resultados de una consulta mostrados en forma de tabla al hacer click en cada una de los encabezados de la columna.
Tengo un script que lo hace bien pero como yo muestro las filas con colores alternados al hacer la reordenación no me respeta el orden de los colores.
He estado revisando el archivo .js, no es muy extenso pero me parece bastante complejo, ¿se le ocurre algo a alguien para que al re-ordenar me respete los colores alternados?
Les dejo aqui el código:
Este es el archivo tablesort.js
Código PHP:
var dom = (document.getElementsByTagName) ? true : false;
var ie5 = (document.getElementsByTagName && document.all) ? true : false;
var arrowUp, arrowDown;
if (ie5 || dom)
initSortTable();
function initSortTable() {
arrowUp = document.createElement("SPAN");
var tn = document.createTextNode("5");
arrowUp.appendChild(tn);
arrowUp.className = "arrow";
arrowDown = document.createElement("SPAN");
var tn = document.createTextNode("6");
arrowDown.appendChild(tn);
arrowDown.className = "arrow";
}
function sortTable(tableNode, nCol, bDesc, sType) {
var tBody = tableNode.tBodies[0];
var trs = tBody.rows;
var a = new Array();
for (var i=0; i<trs.length; i++) {
a[i] = trs[i];
}
a.sort(compareByColumn(nCol,bDesc,sType));
for (var i=0; i<a.length; i++) {
tBody.appendChild(a[i]);
}
}
function CaseInsensitiveString(s) {
return String(s).toUpperCase();
}
function parseDate(s) {
return Date.parse(s.replace(/-/g, '/'));
}
/* alternative to number function
* This one is slower but can handle non numerical characters in
* the string allow strings like the follow (as well as a lot more)
* to be used:
* "1,000,000"
* "1 000 000"
* "100cm"
*/
function toNumber(s) {
return Number(s.replace(/[^0-9.]/g, ""));
}
function compareByColumn(nCol, bDescending, sType) {
var c = nCol;
var d = bDescending;
var fTypeCast = String;
if (sType == "Number")
fTypeCast = parseFloat;
else if (sType == "Date")
fTypeCast = parseDate;
else if (sType == "CaseInsensitiveString")
fTypeCast = CaseInsensitiveString;
return function (n1, n2) {
if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c])))
return d ? -1 : +1;
if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c])))
return d ? +1 : -1;
return 0;
};
}
function sortColumn(e) {
var tmp, el, tHeadParent;
if (ie5)
tmp = e.srcElement;
else if (dom)
tmp = e.target;
tHeadParent = getParent(tmp, "THEAD");
el = getParent(tmp, "TD");
if (tHeadParent == null)
return;
if (el != null) {
var p = el.parentNode;
var i;
if (el._descending) // catch the null
el._descending = false;
else
el._descending = true;
if (tHeadParent.arrow != null) {
if (tHeadParent.arrow.parentNode != el) {
tHeadParent.arrow.parentNode._descending = null; //reset sort order
}
tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
}
if (el._descending)
tHeadParent.arrow = arrowDown.cloneNode(true);
else
tHeadParent.arrow = arrowUp.cloneNode(true);
el.appendChild(tHeadParent.arrow);
// get the index of the td
for (i=0; i<p.cells.length; i++) {
if (p.cells[i] == el) break;
}
var table = getParent(el, "TABLE");
// can't fail
sortTable(table,i,el._descending, el.getAttribute("type"));
}
}
function getInnerText(el) {
if (ie5) return el.innerText; //Not needed but it is faster
var str = "";
for (var i=0; i<el.childNodes.length; i++) {
switch (el.childNodes.item(i).nodeType) {
case 1: //ELEMENT_NODE
str += getInnerText(el.childNodes.item(i));
break;
case 3: //TEXT_NODE
str += el.childNodes.item(i).nodeValue;
break;
}
}
return str;
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) return el;
else
return getParent(el.parentNode, pTagName);
}
Código PHP:
<table cellspacing="0" cellpadding="5" onclick="sortColumn(event)">
<thead>
<tr>
<td style="width: 120px;" type="String">Procedimiento</td>
<td style="width: 400px;" type="CaseInsensitiveString" title="CaseInsensitiveString">Título</td>
<td style="width: 80px;" type="Number">Revisión</td>
</tr>
</thead>
...
Txarly