JQuery sortiert eine Tabelle ohne das Plugin

Question

Gibt es eine jquery-Funktion, um eine Tabelle zu sortieren. Ich kenne das JQuery Tablesorter-Plugin, möchte es aber nach Möglichkeit nicht verwenden.

Als ein FYI - Die Tabelle, die ich eine Kopfzeile mit benutzerdefinierten Bildern haben, um aufsteigend und absteigend anzuzeigen. Der Datentyp könnte praktisch jeder Typ sein.

EDIT: Kann ich eine Tabelle in Javascript sortieren?

Answer 1

Javascript-Guru Stuart Langridge hat eine schöne Alternative zur Verwendung von jQuery tablesorter.js

http://www.kryogenix.org/code/browser/sorttable/

rief ich es vor verwendet haben; funktioniert super und es ist ziemlich leicht.

Answer 2

Es ist sehr viel möglich. Sie können es tun, wie diese

function sortTable(table, col, reverse) { 
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows 
     tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array 
     i; 
    reverse = -((+reverse) || -1); 
    tr = tr.sort(function (a, b) { // sort rows 
     return reverse // `-1 *` if want opposite order 
      * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test 
       .localeCompare(b.cells[col].textContent.trim()) 
       ); 
    }); 
    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order 
} 

function makeSortable(table) { 
    var th = table.tHead, i; 
    th && (th = th.rows[0]) && (th = th.cells); 
    if (th) i = th.length; 
    else return; // if no `<thead>` then do nothing 
    while (--i >= 0) (function (i) { 
     var dir = 1; 
     th[i].addEventListener('click', function() {sortTable(table, i, (dir = 1 - dir))}); 
    }(i)); 
} 

function makeAllSortable(parent) { 
    parent = parent || document.body; 
    var t = parent.getElementsByTagName('table'), i = t.length; 
    while (--i >= 0) makeSortable(t[i]); 
} 

window.onload = function() {makeAllSortable();}; 

in diesem Werfen Sie einen Blick Fiddle

(Ich bin nicht der Autor des obigen Code oder dieser Geige, fand ich es nur während für die Lösung zu suchen.)

Answer 3

ich hatte die Sortierfunktion ein wenig zu ändern, so wäre es nicht-numerische Zeichen ignorieren, dies wird hoffentlich jemand einige Zeit sparen ....

function sortTable(table, col, reverse) { 
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows 
    tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array 
    i; 

    reverse = ((+reverse) || -1); 

    tr = tr.sort(function (a, b) { // sort rows 
     return reverse * (Number(a.cells[col].textContent.replace(/[^\d.-]/g, '')) 
      - Number(b.cells[col].textContent.replace(/[^\d.-]/g, ''))); 
    }); 

    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order 
} 

Answer 4

Für kleine Tische, das tue ich es auf diese Weise ...

sortTable = function(tableName, rowClass, columnNumber, ascending) { 
    var row, cell, cellContent; 
    var comparisonRow, comparisonCell, comparisonContent; 

    $("#" + tableName + " tr." + rowClass).each(function(i) { 
     row = $("#" + tableName + " tr." + rowClass + ":eq(" + i + ")"); 
     cell = $(row).find("td:eq(" + columnNumber + ")"); 
     cellContent = $(cell).html(); 

     $("#" + tableName + " tr." + rowClass).each(function(j) { 
      comparisonRow = $("#" + tableName + " tr." + rowClass + ":eq(" + j + ")"); 
      comparisonCell = $(comparisonRow).find("td:eq(" + columnNumber + ")"); 
      comparisonContent = $(comparisonCell).html(); 

      if ((ascending && cellContent < comparisonContent) || (!ascending && cellContent > comparisonContent)) { 
       $(row).insertBefore(comparisonRow); 
       return false; 
      } 
     }); 
    }); 
}; 

Erläuterung: Die Funktion jeder Zeile geht durch (einer bestimmten Klasse) der Tabelle angegeben ist, Kenntnis von dem HTML-Inhalt nimmt (aus der Zelle der angegebenen Spalte) und durchläuft dann alle Tabellenzeilen, die den Zelleninhalt vergleichen (wiederum aus der angegebenen Spalte). Wenn der Zelleninhalt kleiner oder größer ist (basierend darauf, ob "aufsteigend" auf "wahr" gesetzt ist), wird die Zeile vor derjenigen eingefügt, mit der sie verglichen wurde.

Ein Beispielaufruf wäre ...

sortTable("sample_table", "data_row", 0, true); 

... die Zeilen sortieren würde, die die Klasse „DATA_ROW“ haben, in der Tabelle „Beispieltabelle“ genannt, basierend auf Zellen in der erste Spalte (dh Spaltenindex 0) in aufsteigender Reihenfolge.

Für größere Tabellen und zusätzliche Funktionen, verwende ich ...

• DataTables

rechten Seite der Box, finde ich Tables viel einfacher zu bedienen als Tablesorter (zB keine Notwendigkeit zum Referenzieren oder Einfügen zusätzlicher CSS und Grafiken, außer Sie möchten), und die Dokumentation ist hervorragend. Ich mag auch die Standardfunktionalität (z. B. seine Suchfunktion).