Como ordenar una tabla únicamente con JavaScript

Para ordenar una tabla, no es necesario usar ningún componente de terceros, ya que únicamente con unas pocas líneas de JavaScript «básico» lo podemos conseguir.

Para esto, necesitaremos que nuestra tabla tenga un atributo ID, y poner un evento onclick en cada una de las cabeceras por las cuales queramos ordenar.

Procedimiento

El procedimiento consiste en recorrer todas las filas(TR) de la tabla y de cada una de ellas, comprobar el valor de la celda por la que queremos ordenar y comparar dicho valor con la siguiente fila (TR), en caso de no estar ordenados intercambiar las filas y seguir ordenando la tabla.

Si llegamos al final de la tabla y no ha habido ningún cambio, se entiende que quieres ordenar de la otra forma (ascendente y descendente).

Código

Tabla HTML

Muy importante el ID, y el evento onclick

 <table border id="myTable2">
    <thead>
      <tr>
        <th onclick="sortTable('myTable2', 0)">ID</th>
        <th onclick="sortTable('myTable2', 1)">Nombre</th>
        <th onclick="sortTable('myTable2', 2)">Email</th>
      </tr>
    </thead>
    <tbody>

Función Javascript

function sortTable(tablaID, col) {
    var table, enProceso, sortDir, rows, i, ini, debeCambiar, valorActual, valorNext, cambios;
    table = document.getElementById(tablaID);
    enProceso = true;
    sortDir = "asc";
    cambios = 0;

    if (table.getElementsByTagName("thead")[0] === undefined) {
      rows = table.rows;
      ini = 1;
    } else {
      rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
      ini = 0;
    }

    while (enProceso) {
      enProceso = false;
      for (i = ini; i < (rows.length - 1); i++) {
        debeCambiar = false;
        valorActual = rows[i].getElementsByTagName("td")[col];
        valorNext = rows[i + 1].getElementsByTagName("td")[col];

        if (sortDir == "asc") {
          if (valorActual.innerHTML.toLowerCase() > valorNext.innerHTML.toLowerCase()) {
            debeCambiar = true;
            break;
          }
        } else { // DEsc
          if (valorActual.innerHTML.toLowerCase() < valorNext.innerHTML.toLowerCase()) {
            debeCambiar = true;
            break;
          }
        }
      }

      if (debeCambiar) {
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        enProceso = true;
        cambios = 1;
      } else {
        if (cambios == 0 && sortDir == "asc") {
          sortDir = "desc";
          enProceso = true;
        }
      }

    }
  }

Tienes la página completa en nuestro GitHub

Video explicando todo lo realizado