0

Recibo una tabla que mi programa pinta por html table, entonces me piden que la ordene por las diferentes columnas de modo ascendente y descendente, lo pense y lo puse por onclick en el titulo de cada columna, un click, ordena ascendente el segundo click de forma descendente.

pero mi problema es que la tabla tiene muchisimos registros/tuplas, y tarda como 5' en ejecutarse el sort

acá mi código de ordenacion:

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("listado-empresas");
  switching = true;
  dir = "asc"; 
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
       shouldSwitch = false;
       x = rows[i].getElementsByTagName("td")[n];
      y = rows[i + 1].getElementsByTagName("td")[n];
       if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
           shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;      
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
2
  • En general, comparar con strings no debe ser muy eficiente. Ese dir más bien hazlo algo como order_asc (booleano) y eso debe dar una mejora notable.
    – user187182
    Commented el 29 sept. 2020 a las 8:09
  • Has probado dataTables, es un plugin de jquery muy potente que te permite ordenar por columnas entre otras funciones como búsqueda, paginación, etc. Aquí la documentación.
    – DjCrazy
    Commented el 29 sept. 2020 a las 12:24

3 respuestas 3

1

Un par de puntos:

  • Estás usando el HTML como estructura de datos. NO HAGAS ESO. Navegar el DOM es lento. Modificarlo aún más. Que para cada swap el navegador tenga que redibujar los datos es aún más lento. Y peor aún con table por enmedio.

    Pon los datos en una estrucutra de datos (un array de objetos) y ordena esa estructura. Dibujar el HTML debe hacerse al final, en una única pasada.

    Adicionalmente, recuerdo algunos comentarios sobre las table siendo muy lentas para renderizar y recomendando el uso de CSS en su lugar. No me he dedicado mucho a ello, así que no opinaré sobre esto.

  • Para la carga inicial de los datos, recupera ya los datos ordenados del backend. Así no tendrás que ordenarlos en el HTML.

  • El comentario que hace eftshift0 es válido. Un booleano en vez de un string para indicar el orden es más eficiente.

  • Asume que si tienes muchos datos, antes o después tendrás que hacer paginación de los mismos.

1
  • Muchas gracias por sus consejos, los valoro mucho, el problema es que estoy de practicas y esto es lo que hay hecho ya, con wordpress, adjunto como posible solución el codigo que es rapidisimo con ES6, para mi posible solución
    – user188091
    Commented el 29 sept. 2020 a las 9:00
0

Se me ocurrió una idea, aunque me parece muy loca, pero podría ser útil para no hacer tantos cambios en el DOM al ordenar la tabla.

Se trata de separar en un arreglo solo los valores que se quieren ordenar, guardando una referencia para poder acceder a la fila que pertenece y poder moverla después de ordenar.

Para solventar el problema de diacríticos (á, ü, etc.), se usa string.localCompare() dentro del callback de la función sort().

Después de ordenar el arreglo, se recorre para obtener la fila y, con appendChild() se mueve al final de tbody.

En teoría, esto debe ser mucho más rápido que lo que tienes actualmente, porque se trabaja sobre un arreglo y no se realizan cambios al DOM hasta que ya se tiene todo ordenado, sin embargo, habría que ver el comportamiento con gran cantidad de filas.

document.addEventListener('DOMContentLoaded', () => {
  let tables = document.querySelectorAll('.sortable');
  tables.forEach(table => {
      let tbody = table.querySelector('tbody');
      let trs = tbody.querySelectorAll('tr');
      if(trs.length == 0) {
          // Nada que hacer con esta tabla
          return;
      }
      // Ascendente o descendente
      let order, lastColumn;
      // Asignar número para poder acceder y mover a ubicación final
      trs.forEach((tr, trNum) => tr.dataset.num = trNum);
      // Obtener celdas de título para asignar evento y ordenar al hacer clic
      let ths = table.querySelectorAll('thead th');
      ths.forEach((th, column) => th.addEventListener('click', () => {
          // Crear un arreglo con dato de fila y valor de celda
          let values = [];
          trs.forEach(tr => {
              values.push({
                  trData: tr.dataset.num,
                  value: tr.querySelectorAll('td')[column].innerText
              });
          });
          // Ordenar valores
          values.sort((a,b) => a.value.localeCompare(b.value));
          // Definir el orden en que se va a mostrar
          if(lastColumn !== column) {
              // Si el clic no es en la misma columna que el anterior
              // Restablecer orden
              order = null;
          }
          lastColumn = column;
          // Definir el orden de salida
          if(!order || order == 'DESC') {
              // En el primer clic en la misma columna, order es nulo
              order = 'ASC'
          } else {
              order = 'DESC';
          }
          if(order == 'DESC') {
              values.reverse();
          }
          // Ordenar tabla
          values.forEach(data => {
              let trMove = table.querySelector(`[data-num="${data.trData}"]`);
              tbody.appendChild(trMove);
          });
      }));
  });
});
<table class="sortable">
<thead>
  <tr>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Ciudad</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Juan</td>
    <td>Álvarez</td>
    <td>León</td>
  </tr>
  <tr>
    <td>José</td>
    <td>Guadián</td>
    <td>Aguascalientes</td>
  </tr>
  <tr>
    <td>Pedro</td>
    <td>Gómez</td>
    <td>Guadalajara</td>
  </tr>
</tbody>
</table>

Al hacer clic en una celda de título (thead > th) se ordena por esa columna, de forma ascendente. En segundo clic sobre la misma columna el orden es descendente, simplemente invirtiendo el arreglo con reverse().

Nota acerca de rendimiento: En una tabla sencilla cloné las filas existentes hasta tener 816 y medí los tiempos con funciones de consola, con estos resultados:

introducir la descripción de la imagen aquí

1
  • Muchas gracias por tu ayuda, te lo agradezco, me has salvado, wow!, alegra ver personas así!!!
    – user188091
    Commented el 2 oct. 2020 a las 9:15
0
var stIsIE = /*@cc_on!@*/ false;

sorttable = {
  init: function () {
    // quit if this function has already been called
    if (arguments.callee.done) return;
    // flag this function so we don't do the same thing twice
    arguments.callee.done = true;
    // kill the timer
    if (_timer) clearInterval(_timer);

    if (!document.createElement || !document.getElementsByTagName) return;

    sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;

    forEach(document.getElementsByTagName("table"), function (table) {
      if (table.className.search(/\bsortable\b/) != -1) {
        sorttable.makeSortable(table);
      }
    });
  },

  makeSortable: function (table) {
    if (table.getElementsByTagName("thead").length == 0) {
      // table doesn't have a tHead. Since it should have, create one and
      // put the first table row in it.
      the = document.createElement("thead");
      the.appendChild(table.rows[0]);
      table.insertBefore(the, table.firstChild);
    }
    // Safari doesn't support table.tHead, sigh
    if (table.tHead == null)
      table.tHead = table.getElementsByTagName("thead")[0];

    if (table.tHead.rows.length != 1) return; // can't cope with two header rows

    // Sorttable v1 put rows with a class of "sortbottom" at the bottom (as
    // "total" rows, for example). This is B&R, since what you're supposed
    // to do is put them in a tfoot. So, if there are sortbottom rows,
    // for backwards compatibility, move them to tfoot (creating it if needed).
    sortbottomrows = [];
    for (var i = 0; i < table.rows.length; i++) {
      if (table.rows[i].className.search(/\bsortbottom\b/) != -1) {
        sortbottomrows[sortbottomrows.length] = table.rows[i];
      }
    }
    if (sortbottomrows) {
      if (table.tFoot == null) {
        // table doesn't have a tfoot. Create one.
        tfo = document.createElement("tfoot");
        table.appendChild(tfo);
      }
      for (var i = 0; i < sortbottomrows.length; i++) {
        tfo.appendChild(sortbottomrows[i]);
      }
      delete sortbottomrows;
    }

    // work through each column and calculate its type
    headrow = table.tHead.rows[0].cells;
    for (var i = 0; i < headrow.length; i++) {
      // manually override the type with a sorttable_type attribute
      if (!headrow[i].className.match(/\bsorttable_nosort\b/)) {
        // skip this col
        mtch = headrow[i].className.match(/\bsorttable_([a-z0-9]+)\b/);
        if (mtch) {
          override = mtch[1];
        }
        if (mtch && typeof sorttable["sort_" + override] == "function") {
          headrow[i].sorttable_sortfunction = sorttable["sort_" + override];
        } else {
          headrow[i].sorttable_sortfunction = sorttable.guessType(table, i);
        }
        // make it clickable to sort
        headrow[i].sorttable_columnindex = i;
        headrow[i].sorttable_tbody = table.tBodies[0];
        dean_addEvent(
          headrow[i],
          "click",
          (sorttable.innerSortFunction = function (e) {
            if (this.className.search(/\bsorttable_sorted\b/) != -1) {
              // if we're already sorted by this column, just
              // reverse the table, which is quicker
              sorttable.reverse(this.sorttable_tbody);
              this.className = this.className.replace(
                "sorttable_sorted",
                "sorttable_sorted_reverse"
              );
              this.removeChild(document.getElementById("sorttable_sortfwdind"));
              sortrevind = document.createElement("span");
              sortrevind.id = "sorttable_sortrevind";
              sortrevind.innerHTML = stIsIE
                ? '&nbsp<font face="webdings">5</font>'
                : "&nbsp;&#x25B4;";
              this.appendChild(sortrevind);
              return;
            }
            if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) {
              // if we're already sorted by this column in reverse, just
              // re-reverse the table, which is quicker
              sorttable.reverse(this.sorttable_tbody);
              this.className = this.className.replace(
                "sorttable_sorted_reverse",
                "sorttable_sorted"
              );
              this.removeChild(document.getElementById("sorttable_sortrevind"));
              sortfwdind = document.createElement("span");
              sortfwdind.id = "sorttable_sortfwdind";
              sortfwdind.innerHTML = stIsIE
                ? '&nbsp<font face="webdings">6</font>'
                : "&nbsp;&#x25BE;";
              this.appendChild(sortfwdind);
              return;
            }

            // remove sorttable_sorted classes
            theadrow = this.parentNode;
            forEach(theadrow.childNodes, function (cell) {
              if (cell.nodeType == 1) {
                // an element
                cell.className = cell.className.replace(
                  "sorttable_sorted_reverse",
                  ""
                );
                cell.className = cell.className.replace("sorttable_sorted", "");
              }
            });
            sortfwdind = document.getElementById("sorttable_sortfwdind");
            if (sortfwdind) {
              sortfwdind.parentNode.removeChild(sortfwdind);
            }
            sortrevind = document.getElementById("sorttable_sortrevind");
            if (sortrevind) {
              sortrevind.parentNode.removeChild(sortrevind);
            }

            this.className += " sorttable_sorted";
            sortfwdind = document.createElement("span");
            sortfwdind.id = "sorttable_sortfwdind";
            sortfwdind.innerHTML = stIsIE
              ? '&nbsp<font face="webdings">6</font>'
              : "&nbsp;&#x25BE;";
            this.appendChild(sortfwdind);

            // build an array to sort. This is a Schwartzian transform thing,
            // i.e., we "decorate" each row with the actual sort key,
            // sort based on the sort keys, and then put the rows back in order
            // which is a lot faster because you only do getInnerText once per row
            row_array = [];
            col = this.sorttable_columnindex;
            rows = this.sorttable_tbody.rows;
            for (var j = 0; j < rows.length; j++) {
              row_array[row_array.length] = [
                sorttable.getInnerText(rows[j].cells[col]),
                rows[j]
              ];
            }
            /* If you want a stable sort, uncomment the following line */
            //sorttable.shaker_sort(row_array, this.sorttable_sortfunction);
            /* and comment out this one */
            row_array.sort(this.sorttable_sortfunction);

            tb = this.sorttable_tbody;
            for (var j = 0; j < row_array.length; j++) {
              tb.appendChild(row_array[j][1]);
            }

            delete row_array;
          })
        );
      }
    }
  },

  guessType: function (table, column) {
    // guess the type of a column based on its first non-blank row
    sortfn = sorttable.sort_alpha;
    for (var i = 0; i < table.tBodies[0].rows.length; i++) {
      text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]);
      if (text != "") {
        if (text.match(/^-?[£$¤]?[\d,.]+%?$/)) {
          return sorttable.sort_numeric;
        }
        // check for a date: dd/mm/yyyy or dd/mm/yy
        // can have / or . or - as separator
        // can be mm/dd as well
        possdate = text.match(sorttable.DATE_RE);
        if (possdate) {
          // looks like a date
          first = parseInt(possdate[1]);
          second = parseInt(possdate[2]);
          if (first > 12) {
            // definitely dd/mm
            return sorttable.sort_ddmm;
          } 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;
          }
        }
      }
    }
    return sortfn;
  },

  getInnerText: function (node) {
    // gets the text we want to use for sorting for a cell.
    // strips leading and trailing whitespace.
    // this is *not* a generic getInnerText function; it's special to sorttable.
    // for example, you can override the cell text with a customkey attribute.
    // it also gets .value for <input> fields.

    if (!node) return "";

    hasInputs =
      typeof node.getElementsByTagName == "function" &&
      node.getElementsByTagName("input").length;

    if (node.getAttribute("sorttable_customkey") != null) {
      return node.getAttribute("sorttable_customkey");
    } else if (typeof node.textContent != "undefined" && !hasInputs) {
      return node.textContent.replace(/^\s+|\s+$/g, "");
    } else if (typeof node.innerText != "undefined" && !hasInputs) {
      return node.innerText.replace(/^\s+|\s+$/g, "");
    } else if (typeof node.text != "undefined" && !hasInputs) {
      return node.text.replace(/^\s+|\s+$/g, "");
    } else {
      switch (node.nodeType) {
        case 3:
          if (node.nodeName.toLowerCase() == "input") {
            return node.value.replace(/^\s+|\s+$/g, "");
          }
        case 4:
          return node.nodeValue.replace(/^\s+|\s+$/g, "");
          break;
        case 1:
        case 11:
          var innerText = "";
          for (var i = 0; i < node.childNodes.length; i++) {
            innerText += sorttable.getInnerText(node.childNodes[i]);
          }
          return innerText.replace(/^\s+|\s+$/g, "");
          break;
        default:
          return "";
      }
    }
  },

  reverse: function (tbody) {
    // reverse the rows in a tbody
    newrows = [];
    for (var i = 0; i < tbody.rows.length; i++) {
      newrows[newrows.length] = tbody.rows[i];
    }
    for (var i = newrows.length - 1; i >= 0; i--) {
      tbody.appendChild(newrows[i]);
    }
    delete newrows;
  },

  /* sort functions
     each sort function takes two parameters, a and b
     you are comparing a[0] and b[0] */
  sort_numeric: function (a, b) {
    aa = parseFloat(a[0].replace(/[^0-9.-]/g, ""));
    if (isNaN(aa)) aa = 0;
    bb = parseFloat(b[0].replace(/[^0-9.-]/g, ""));
    if (isNaN(bb)) bb = 0;
    return aa - bb;
  },
  sort_alpha: function (a, b) {
    if (a[0] == b[0]) return 0;
    if (a[0] < b[0]) return -1;
    return 1;
  },
  sort_ddmm: function (a, b) {
    mtch = a[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;
    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;
  },
  sort_mmdd: function (a, b) {
    mtch = a[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;
    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;
  },

  shaker_sort: function (list, comp_func) {
    // A stable sort function to allow multi-level sorting of data
    // see: http://en.wikipedia.org/wiki/Cocktail_sort
    // thanks to Joseph Nahmias
    var b = 0;
    var t = list.length - 1;
    var swap = true;

    while (swap) {
      swap = false;
      for (var i = b; i < t; ++i) {
        if (comp_func(list[i], list[i + 1]) > 0) {
          var q = list[i];
          list[i] = list[i + 1];
          list[i + 1] = q;
          swap = true;
        }
      } // for
      t--;

      if (!swap) break;

      for (var i = t; i > b; --i) {
        if (comp_func(list[i], list[i - 1]) < 0) {
          var q = list[i];
          list[i] = list[i - 1];
          list[i - 1] = q;
          swap = true;
        }
      } // for
      b++;
    } // while(swap)
  }
};

/* ******************************************************************
   Supporting functions: bundled here to avoid depending on a library
   ****************************************************************** */

// Dean Edwards/Matthias Miller/John Resig

/* for Mozilla/Opera9 */
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", sorttable.init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
    document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
    var script = document.getElementById("__ie_onload");
    script.onreadystatechange = function() {
        if (this.readyState == "complete") {
            sorttable.init(); // call the onload handler
        }
    };
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) {
  // sniff
  var _timer = setInterval(function () {
    if (/loaded|complete/.test(document.readyState)) {
      sorttable.init(); // call the onload handler
    }
  }, 10);
}

/* for other browsers */
window.onload = sorttable.init;

// written by Dean Edwards, 2005
// with input from Tino Zijdel, Matthias Miller, Diego Perini

// http://dean.edwards.name/weblog/2005/10/add-event/

function dean_addEvent(element, type, handler) {
  if (element.addEventListener) {
    element.addEventListener(type, handler, false);
  } else {
    // assign each event handler a unique ID
    if (!handler.$$guid) handler.$$guid = dean_addEvent.guid++;
    // create a hash table of event types for the element
    if (!element.events) element.events = {};
    // create a hash table of event handlers for each element/event pair
    var handlers = element.events[type];
    if (!handlers) {
      handlers = element.events[type] = {};
      // store the existing event handler (if there is one)
      if (element["on" + type]) {
        handlers[0] = element["on" + type];
      }
    }
    // store the event handler in the hash table
    handlers[handler.$$guid] = handler;
    // assign a global event handler to do all the work
    element["on" + type] = handleEvent;
  }
}
// a counter used to create unique IDs
dean_addEvent.guid = 1;

function removeEvent(element, type, handler) {
  if (element.removeEventListener) {
    element.removeEventListener(type, handler, false);
  } else {
    // delete the event handler from the hash table
    if (element.events && element.events[type]) {
      delete element.events[type][handler.$$guid];
    }
  }
}

function handleEvent(event) {
  var returnValue = true;
  // grab the event object (IE uses a global event object)
  event =
    event ||
    fixEvent(
      ((this.ownerDocument || this.document || this).parentWindow || window)
        .event
    );
  // get a reference to the hash table of event handlers
  var handlers = this.events[event.type];
  // execute each event handler
  for (var i in handlers) {
    this.$$handleEvent = handlers[i];
    if (this.$$handleEvent(event) === false) {
      returnValue = false;
    }
  }
  return returnValue;
}

function fixEvent(event) {
  // add W3C standard event methods
  event.preventDefault = fixEvent.preventDefault;
  event.stopPropagation = fixEvent.stopPropagation;
  return event;
}
fixEvent.preventDefault = function () {
  this.returnValue = false;
};
fixEvent.stopPropagation = function () {
  this.cancelBubble = true;
};

// Dean's forEach: http://dean.edwards.name/base/forEach.js
/*
    forEach, version 1.0
    Copyright 2006, Dean Edwards
    License: http://www.opensource.org/licenses/mit-license.php
*/

// array-like enumeration
if (!Array.forEach) {
  // mozilla already supports this
  Array.forEach = function (array, block, context) {
    for (var i = 0; i < array.length; i++) {
      block.call(context, array[i], i, array);
    }
  };
}

// generic enumeration
Function.prototype.forEach = function (object, block, context) {
  for (var key in object) {
    if (typeof this.prototype[key] == "undefined") {
      block.call(context, object[key], key, object);
    }
  }
};

// character enumeration
String.forEach = function (string, block, context) {
  Array.forEach(string.split(""), function (chr, index) {
    block.call(context, chr, index, string);
  });
};

// globally resolve forEach enumeration
var forEach = function (object, block, context) {
  if (object) {
    var resolve = Object; // default
    if (object instanceof Function) {
      // functions have a "length" property
      resolve = Function;
    } else if (object.forEach instanceof Function) {
      // the object implements a custom forEach method so use that
      object.forEach(block, context);
      return;
    } else if (typeof object == "string") {
      // the object is a string
      resolve = String;
    } else if (typeof object.length == "number") {
      // the object is array-like
      resolve = Array;
    }
    resolve.forEach(object, block, context);
  }
};
3
  • 1
    El problema de esta solución es que me da fallo en la ordenacion con acentos, fallo no, que es otra codificación distinta a con acento y por eso me lo ordena mal entre comillas, como podría ponerlo para que sean iguales? muchas gracias de ante mano
    – user188091
    Commented el 29 sept. 2020 a las 9:23
  • 2
    Los comentarios del código en español por favor
    – user128299
    Commented el 29 sept. 2020 a las 9:28
  • 1
    Creo que esto debería ser una actualización de la pregunta, en lugar de una respuesta.
    – Triby
    Commented el 29 sept. 2020 a las 16:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.