jQuery-Tabellensortierung

Ich habe eine sehr einfache HTML-Tabelle mit 4 Spalten:

Facility Name, Phone #, City, Specialty

Ich möchte, dass der Benutzer nur nach Name der Einrichtung und Stadt sortieren kann .

Wie kann ich dies mit jQuery codieren?

Wenn Sie alle Schnickschnack vermeiden möchten, kann ich dieses einfache sortElementsPlugin vorschlagen . Verwendung:

var table = $('table');

$('.sortable th')
    .wrapInner('<span title="sort this column"/>')
    .each(function(){

        var th = $(this),
            thIndex = th.index(),
            inverse = false;

        th.click(function(){

            table.find('td').filter(function(){

                return $(this).index() === thIndex;

            }).sortElements(function(a, b){

                if( $.text([a]) == $.text([b]) )
                    return 0;

                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;

            }, function(){

                // parentNode is the element we want to move
                return this.parentNode; 

            });

            inverse = !inverse;

        });

    });

Und eine Demo. (Klicken Sie zum Sortieren auf die Spaltenüberschriften "Stadt" und "Einrichtung".)

Ich bin darauf gestoßen und dachte, ich würde meine 2 Cent einwerfen. Klicken Sie auf die Spaltenüberschriften, um aufsteigend und erneut absteigend zu sortieren.

• Funktioniert in Chrome, Firefox, Opera UND IE (8)
• Verwendet nur JQuery
• Sortiert alphanumerisch - aufsteigend und absteigend

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }

table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><th>Country</th><th>Date</th><th>Size</th></tr>
    <tr><td>France</td><td>2001-01-01</td><td>25</td></tr>
    <tr><td><a href=#>spain</a></td><td>2005-05-05</td><td></td></tr>
    <tr><td>Lebanon</td><td>2002-02-02</td><td>-17</td></tr>
    <tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
    <tr><td>USA</td><td></td><td>-6</td></tr>
</table>

** Update: 2018

• Für diejenigen, die interessiert sind, habe ich hier eine ES6 Plain Javascript-Lösung bereitgestellt .

Das mit Abstand einfachste, das ich verwendet habe, ist: http://datatables.net/

Erstaunlich einfach ... Stellen Sie einfach sicher, dass Sie Ihre Tabelle mit formatieren <thead>und <tbody>sie nicht funktioniert , wenn Sie den DOM-Ersetzungsweg gehen (IE, Erstellen einer Tabelle und Neuformatieren von DataTables) . Das ist ungefähr das einzige Problem.

Es gibt auch Unterstützung für AJAX usw. Wie bei allen wirklich guten Codeteilen ist es auch SEHR einfach, alles auszuschalten. Sie wären jedoch überrascht, was Sie verwenden könnten. Ich begann mit einer "nackten" Datentabelle, die nur ein Feld sortierte, und stellte dann fest, dass einige der Funktionen für meine Arbeit wirklich relevant waren. Kunden lieben die neuen Funktionen.

Bonuspunkte für DataTables für die vollständige Unterstützung von ThemeRoller ....

Ich hatte auch gutes Glück mit Tablesorter, aber es ist bei weitem nicht so einfach, nicht ganz so gut dokumentiert und hat nur gute Funktionen.

Wir haben gerade angefangen, dieses Slick-Tool zu verwenden: https://plugins.jquery.com/tablesorter/

Es gibt ein Video zu seiner Verwendung unter: http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx

    $('#tableRoster').tablesorter({
        headers: {
            0: { sorter: false },
            4: { sorter: false }
        }
    });

Mit einem einfachen Tisch

<table id="tableRoster">
        <thead> 
                  <tr>
                    <th><input type="checkbox" class="rCheckBox" value="all" id="rAll" ></th>
                    <th>User</th>
                    <th>Verified</th>
                    <th>Recently Accessed</th>
                    <th>&nbsp;</th>
                  </tr>
        </thead>

Meine Antwort wäre "Vorsicht". Viele Add-Ons zum Sortieren von jQuery-Tabellen sortieren nur das, was Sie an den Browser übergeben. In vielen Fällen müssen Sie berücksichtigen, dass Tabellen dynamische Datensätze sind und möglicherweise zig Millionen Datenzeilen enthalten können.

Sie erwähnen, dass Sie nur 4 Spalten haben, aber viel wichtiger ist, dass Sie nicht erwähnen, über wie viele Zeilen wir hier sprechen.

Wenn Sie 5000 Zeilen aus der Datenbank an den Browser übergeben und wissen, dass die tatsächliche Datenbanktabelle 100.000 Zeilen enthält, lautet meine Frage: Was bringt es, die Tabelle sortierbar zu machen? Um eine ordnungsgemäße Sortierung durchzuführen, müssen Sie die Abfrage an die Datenbank zurücksenden und die Datenbank (ein Tool zum Sortieren von Daten) die Sortierung für Sie durchführen lassen.

Als direkte Antwort auf Ihre Frage ist Ingrid das beste Sortier-Add-On, auf das ich gestoßen bin. Es gibt viele Gründe, warum ich dieses Add-On nicht mag ("unnötige Schnickschnack ...", wie Sie es nennen), aber eine der besten Eigenschaften in Bezug auf die Art ist, dass es Ajax verwendet und nicht. Es wird nicht davon ausgegangen, dass Sie bereits alle Daten übergeben haben, bevor die Sortierung durchgeführt wird.

Ich erkenne, dass diese Antwort für Ihre Anforderungen wahrscheinlich übertrieben (und über 2 Jahre zu spät) ist, aber ich ärgere mich, wenn Entwickler in meinem Bereich diesen Punkt übersehen. Ich hoffe also, dass jemand anderes es aufgreift.

Ich fühle mich jetzt besser.

Ich liebe diese akzeptierte Antwort, aber selten erhalten Sie Anforderungen zum Sortieren von HTML und müssen keine Symbole hinzufügen, die die Sortierrichtung angeben. Ich habe das Verwendungsbeispiel der Antwort akzeptiert und dies schnell behoben, indem ich einfach Bootstrap zu meinem Projekt hinzugefügt und den folgenden Code hinzugefügt habe:

<div></div>

in jedem, <th>so dass Sie einen Platz haben, um das Symbol zu setzen.

setIcon(this, inverse);

aus der Verwendung der akzeptierten Antwort unter der Zeile:

th.click(function () {

und durch Hinzufügen der setIcon-Methode:

function setIcon(element, inverse) {

        var iconSpan = $(element).find('div');

        if (inverse == false) {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('icon-white icon-arrow-up');
        } else {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('icon-white icon-arrow-down');
        }
        $(element).siblings().find('div').removeClass();
    }

Hier ist eine Demo . - Sie müssen entweder die Demo in Firefox oder IE ausführen oder die MIME-Typprüfung von Chrome deaktivieren, damit die Demo funktioniert. Dies hängt vom sortElements-Plugin ab, das durch die akzeptierte Antwort als externe Ressource verknüpft ist. Nur ein Kopf hoch!

Dies ist eine gute Möglichkeit, eine Tabelle zu sortieren:

$(document).ready(function () {
                $('th').each(function (col) {
                    $(this).hover(
                            function () {
                                $(this).addClass('focus');
                            },
                            function () {
                                $(this).removeClass('focus');
                            }
                    );
                    $(this).click(function () {
                        if ($(this).is('.asc')) {
                            $(this).removeClass('asc');
                            $(this).addClass('desc selected');
                            sortOrder = -1;
                        } else {
                            $(this).addClass('asc selected');
                            $(this).removeClass('desc');
                            sortOrder = 1;
                        }
                        $(this).siblings().removeClass('asc selected');
                        $(this).siblings().removeClass('desc selected');
                        var arrData = $('table').find('tbody >tr:has(td)').get();
                        arrData.sort(function (a, b) {
                            var val1 = $(a).children('td').eq(col).text().toUpperCase();
                            var val2 = $(b).children('td').eq(col).text().toUpperCase();
                            if ($.isNumeric(val1) && $.isNumeric(val2))
                                return sortOrder == 1 ? val1 - val2 : val2 - val1;
                            else
                                return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
                        });
                        $.each(arrData, function (index, row) {
                            $('tbody').append(row);
                        });
                    });
                });
            });

            table, th, td {
            border: 1px solid black;
        }
        th {
            cursor: pointer;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
        <tr><th>id</th><th>name</th><th>age</th></tr>
        <tr><td>1</td><td>Julian</td><td>31</td></tr>
        <tr><td>2</td><td>Bert</td><td>12</td></tr>
        <tr><td>3</td><td>Xavier</td><td>25</td></tr>
        <tr><td>4</td><td>Mindy</td><td>32</td></tr>
        <tr><td>5</td><td>David</td><td>40</td></tr>
    </table>

Die Geige finden Sie hier:
https://jsfiddle.net/e3s84Luw/

Die Erklärung finden Sie hier: https://www.learningjquery.com/2017/03/how-to-sort-html-table-using-jquery-code

Hier ist ein Diagramm, das bei der Entscheidung hilfreich sein kann: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

Die Antwort von @Nick Grealy ist großartig, berücksichtigt jedoch nicht mögliche rowspanAttribute der Tabellenkopfzellen (und wahrscheinlich tun es auch die anderen Antworten nicht). Hier ist eine Verbesserung der Antwort von @Nick Grealy, die das behebt. Basierend auch auf dieser Antwort (danke @Andrew Orlov).

Ich habe die $.isNumericFunktion auch durch eine benutzerdefinierte ersetzt (danke @zad), damit sie mit älteren jQuery-Versionen funktioniert.

Um es zu aktivieren, fügen Sie class="sortable"es dem <table>Tag hinzu.

$(document).ready(function() {

    $('table.sortable th').click(function(){
        var table = $(this).parents('table').eq(0);
        var column_index = get_column_index(this);
        var rows = table.find('tbody tr').toArray().sort(comparer(column_index));
        this.asc = !this.asc;
        if (!this.asc){rows = rows.reverse()};
        for (var i = 0; i < rows.length; i++){table.append(rows[i])};
    })

});

function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index);
        return isNumber(valA) && isNumber(valB) ? valA - valB : valA.localeCompare(valB);
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() };

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function get_column_index(element) {
    var clickedEl = $(element);
    var myCol = clickedEl.closest("th").index();
    var myRow = clickedEl.closest("tr").index();
    var rowspans = $("th[rowspan]");
    rowspans.each(function () {
        var rs = $(this);
        var rsIndex = rs.closest("tr").index();
        var rsQuantity = parseInt(rs.attr("rowspan"));
        if (myRow > rsIndex && myRow <= rsIndex + rsQuantity - 1) {
            myCol++;
        }
    });
    // alert('Row: ' + myRow + ', Column: ' + myCol);
    return myCol;
};

Sie können ein jQuery-Plugin ( Breedjs ) verwenden, das Sortieren, Filtern und Paginieren bietet:

HTML:

<table>
  <thead>
    <tr>
      <th sort='name'>Name</th>
      <th>Phone</th>
      <th sort='city'>City</th>
      <th>Speciality</th>
    </tr>
  </thead>
  <tbody>
    <tr b-scope="people" b-loop="person in people">
      <td b-sort="name">{{person.name}}</td>
      <td>{{person.phone}}</td>
      <td b-sort="city">{{person.city}}</td>
      <td>{{person.speciality}}</td>
    </tr>
  </tbody>
</table>

JS:

$(function(){
  var data = {
    people: [
      {name: 'c', phone: 123, city: 'b', speciality: 'a'},
      {name: 'b', phone: 345, city: 'a', speciality: 'c'},
      {name: 'a', phone: 234, city: 'c', speciality: 'b'},
    ]
  };
  breed.run({
    scope: 'people',
    input: data
  });
  $("th[sort]").click(function(){
    breed.sort({
      scope: 'people',
      selector: $(this).attr('sort')
    });
  });
});

Arbeitsbeispiel zur Geige

Dieser legt den / die Browser nicht auf, einfach weiter konfigurierbar:

var table = $('table');

$('th.sortable').click(function(){
    var table = $(this).parents('table').eq(0);
    var ths = table.find('tr:gt(0)').toArray().sort(compare($(this).index()));
    this.asc = !this.asc;
    if (!this.asc)
       ths = ths.reverse();
    for (var i = 0; i < ths.length; i++)
       table.append(ths[i]);
});

function compare(idx) {
    return function(a, b) {
       var A = tableCell(a, idx), B = tableCell(b, idx)
       return $.isNumeric(A) && $.isNumeric(B) ? 
          A - B : A.toString().localeCompare(B)
    }
}

function tableCell(tr, index){ 
    return $(tr).children('td').eq(index).text() 
}

Auf die Antwort von James werde ich nur die Sortierfunktion ändern, um sie universeller zu machen. Auf diese Weise werden Text alphabetisch und Zahlen wie Zahlen sortiert.

if( $.text([a]) == $.text([b]) )
    return 0;
if(isNaN($.text([a])) && isNaN($.text([b]))){
    return $.text([a]) > $.text([b]) ? 
       inverse ? -1 : 1
       : inverse ? 1 : -1;
}
else{
    return parseInt($.text([a])) > parseInt($.text([b])) ? 
      inverse ? -1 : 1
      : inverse ? 1 : -1;
}

Ein weiterer Ansatz zum Sortieren von HTML-Tabellen. (basierend auf W3.JS HTML Sort )

/* Facility Name */
$('#bioTable th:eq(0)').addClass("control-label pointer");
/* Phone # */
$('#bioTable th:eq(1)').addClass("not-allowed");
/* City */
$('#bioTable th:eq(2)').addClass("control-label pointer");
/* Specialty */
$('#bioTable th:eq(3)').addClass("not-allowed");


var collection = [{
  "FacilityName": "MinION",
  "Phone": "999-8888",
  "City": "France",
  "Specialty": "Genetic Prediction"
}, {
  "FacilityName": "GridION X5",
  "Phone": "999-8812",
  "City": "Singapore",
  "Specialty": "DNA Assembly"
}, {
  "FacilityName": "PromethION",
  "Phone": "929-8888",
  "City": "San Francisco",
  "Specialty": "DNA Testing"
}, {
  "FacilityName": "iSeq 100 System",
  "Phone": "999-8008",
  "City": "Christchurch",
  "Specialty": "gDNA-mRNA sequencing"
}]

$tbody = $("#bioTable").append('<tbody></tbody>');

for (var i = 0; i < collection.length; i++) {
  $tbody = $tbody.append('<tr class="item"><td>' + collection[i]["FacilityName"] + '</td><td>' + collection[i]["Phone"] + '</td><td>' + collection[i]["City"] + '</td><td>' + collection[i]["Specialty"] + '</td></tr>');
}

.control-label:after {
  content: "*";
  color: red;
}

.pointer {
  cursor: pointer;
}

.not-allowed {
  cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>

<table id="bioTable" class="w3-table-all">
  <thead>
    <tr>
      <th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(1)')">Facility Name</th>
      <th>Phone #</th>
      <th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(3)')">City</th>
      <th>Specialty</th>
    </tr>
  </thead>
</table>

Am Ende habe ich Nicks Antwort (die beliebteste, aber nicht akzeptierte) https://stackoverflow.com/a/19947532/5271220 verwendet

und kombinierte es mit https://stackoverflow.com/a/16819442/5271220 , wollte dem Projekt jedoch keine Symbole oder Schriftarten hinzufügen. Die CSS-Stile für Sortierspalte aufsteigend / absteigend habe ich Farbe, Auffüllen, abgerundeten Rand gemacht.

Ich habe es auch so modifiziert, dass es eher nach Klassen als nach Klassen sortiert ist, damit wir steuern können, welche sortierbar sind. Dies könnte sich auch später als nützlich erweisen, wenn zwei Tabellen vorhanden sind, obwohl dafür weitere Änderungen erforderlich wären.

Körper:

 html += "<thead>\n";
    html += "<th></th>\n";
    html += "<th class=\"sort-header\">Name <span></span></i></th>\n";
    html += "<th class=\"sort-header\">Status <span></span></th>\n";
    html += "<th class=\"sort-header\">Comments <span></span></th>\n";
    html += "<th class=\"sort-header\">Location <span></span></th>\n";
    html += "<th nowrap class=\"sort-header\">Est. return <span></span></th>\n";
    html += "</thead>\n";
    html += "<tbody>\n"; ...

... weiter unten im Körper

$("body").on("click", ".sort-header", function (e) {
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc) { rows = rows.reverse() }
    for (var i = 0; i < rows.length; i++) { table.append(rows[i]) }

    setIcon(e.target, this.asc);
});

Funktionen:

function comparer(index) {
        return function (a, b) {
            var valA = getCellValue(a, index), valB = getCellValue(b, index)
            return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
        }
    }

    function getCellValue(row, index) {
        return $(row).children('td').eq(index).text()
    }

    function setIcon(element, inverse) {

        var iconSpan = $(element).find('span');

        if (inverse == true) {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('sort-column-asc');
            $(iconSpan)[0].innerHTML = " &#8593 " // arrow up
        } else {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('sort-column-desc');
            $(iconSpan)[0].innerHTML = " &#8595 " // arrow down 
        }

        $(element).siblings().find('span').each(function (i, obj) {
            $(obj).removeClass();
            obj.innerHTML = "";
        });
    }

Meine Wahl! jquery.sortElements.js und einfache jquery
Sehr einfach, sehr einfach, danke nandhp ...

            $('th').live('click', function(){

            var th = $(this), thIndex = th.index(), var table = $(this).parent().parent();

                switch($(this).attr('inverse')){
                case 'false': inverse = true; break;
                case 'true:': inverse = false; break;
                default: inverse = false; break;
                }
            th.attr('inverse',inverse)

            table.find('td').filter(function(){
                return $(this).index() === thIndex;
            }).sortElements(function(a, b){
                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;
            }, function(){
                // parentNode is the element we want to move
                return this.parentNode; 
            });
            inverse = !inverse;     
            });

Dei uma melhorada do código
Ein Kabeljau besser! Funktion für alle Tabellen in allen Th in allen Zeiten ... Schau es dir an!
DEMO