Tabelle Sortierung nach Daten mit SignalR Einfügen

Question

I SignalR bin mit Daten in eine Tabelle schieben, wenn sie erstellt wird.

in der Tabelle Meine Sortierung nicht zu funktionieren scheint.

Das ist meine Jquery-Code:

$(function() { 
    var chat = $.connection.runnerHub; 
    chat.client.refreshTable = function (table) { 
     $('table:last').after('<table id="' + table + '"><thead><tr><td>' + table + '</td></tr></thead><tbody></table>') 

    }; 
    chat.client.refreshSubTable = function (table, categoryName) { 
     if ($('#' + table + ' tbody tr').length > 0) { 
      $('#' + table + ' tbody tr:last').after("<tr><td><a href='/Forum/" + table + "/" + categoryName + "' >" + categoryName + "</a></td></tr>") 

     } else { 
      $('#' + table + ' tbody').append("<tr><td><a href='/Forum/" + table + "/" + categoryName + "' >" + categoryName + "</a></td></tr>") 
     } 
     sortTable($('#' + table), 'asc'); 
    }; 
    $.connection.hub.start().done(function() { 

    }); 
}); 

function sortTable(table, order) { 
 
    var asc = order === 'asc', 
 
    tbody = table.find('tbody'); 
 

 
    tbody.find('tr').sort(function(a, b) { 
 
    if (asc) { 
 
     return $('td:first', a).text().localeCompare($('td:first', b).text()); 
 
    } else { 
 
     return $('td:first', b).text().localeCompare($('td:first', a).text()); 
 
    } 
 
    }).appendTo(tbody); 
 
} 
 

 

 
$('.add').click(function() { 
 
    $('#Class > tbody').append("<tr><td><a href=/Forum/Class/Run>run</a></td></tr>") 
 
    sortTable($('#Class'), 'asc'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Class"> 
 
    <thead> 
 
    <tr> 
 
     <td>Class</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Druid">Druid</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Hunter">Hunter</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Paladin">Paladin</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Mage">Mage</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Priest">Priest</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Rogue">Rogue</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Shaman">Shaman</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warlock">Warlock</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warrior">Warrior</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button class="add"> add </button>

Wenn ich meinen Weg debuggen die JQuery dachte, es fügt die tr aber und es ruft die sortTable() aber es nicht, dass es sort alphabetisch.

Ich kann nicht scheinen, um das Problem zu finden, und das ist, warum ich hoffe jemand kann mir helfen.

Answer 1

Um die Tabelle von Anfang an zu sortieren, müssen Sie nur sortTable einmal anzurufen. In dem von Ihnen bereitgestellten aktualisierten Snippet funktioniert die Sortierung, sobald Sie auf die Schaltfläche "Hinzufügen" klicken, außer dass die neu hinzugefügte Zeile nicht korrekt sortiert wird.

Das Problem hier waren Leerzeichen vor den Einträgen, so müssen Sie $.trim() verwenden, um führende oder nachstehende Leerzeichen aus den Zeichenfolgen zu entfernen. Ich habe auch Ihre Texte in lokalen Variablen gespeichert, um den Code klarer zu machen.

function sortTable(table, order) { 
 
    var asc = order === 'asc', 
 
    tbody = table.find('tbody'); 
 

 
    tbody.find('tr').sort(function(a, b) { 
 
    var atext = $.trim($('td:first', a).text()), 
 
     btext = $.trim($('td:first', b).text()); 
 
    if (asc) { 
 
     return atext.localeCompare(btext); 
 
    } else { 
 
     return btext.localeCompare(atext); 
 
    } 
 
    }).appendTo(tbody); 
 
}; 
 
sortTable($('#Class'), 'asc'); 
 

 

 
$('.add').click(function() { 
 
    $('#Class > tbody').append("<tr><td><a href=/Forum/Class/Run>run</a></td></tr>"); 
 
    sortTable($('#Class'), 'asc'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Class"> 
 
    <thead> 
 
    <tr> 
 
     <td>Class</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Druid">Druid</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Hunter">Hunter</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Paladin">Paladin</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Mage">Mage</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Priest">Priest</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Rogue">Rogue</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Shaman">Shaman</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warlock">Warlock</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warrior">Warrior</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button class="add"> add </button>

Answer 2

Ihre Wähler $('td:first', a) die <td> Zelle zurückkehren - einschließlich der Zeilenvorschub (Textknoten).
Der .text() Anruf wird den Text des <a /> Tages kehrt dann aber den Zeilenvorschub aus dem Textknoten, bevor es auch.

Der hinzugefügte Text hat keinen Zeilenvorschub. Das erste Zeichen im Vergleich ist also ein Zeilenvorschub (10) gegenüber einem druckbaren Zeichen (> 65). Daher wird der hinzugefügte Text immer am Ende der Tabelle bleiben.

ändern Sie die Wähler direkt holt den <a />-Tag statt und die Art funktionieren soll.

function sortTable(table, order) { 
 
    var asc = order === 'asc', 
 
    tbody = table.find('tbody'); 
 

 
    tbody.find('tr').sort(function(a, b) { 
 
    if (asc) { 
 
     return $('td:first a', a).text().localeCompare($('td:first a', b).text()); 
 
    } else { 
 
     return $('td:first a', b).text().localeCompare($('td:first a', a).text()); 
 
    } 
 
    }).appendTo(tbody); 
 
} 
 

 

 
$('.add').click(function() { 
 
    $('#Class > tbody').append("<tr><td><a href=/Forum/Class/Run>run</a></td></tr>") 
 
    sortTable($('#Class'), 'asc'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Class"> 
 
    <thead> 
 
    <tr> 
 
     <td>Class</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Druid">Druid</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Hunter">Hunter</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Paladin">Paladin</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Mage">Mage</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Priest">Priest</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Rogue">Rogue</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Shaman">Shaman</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warlock">Warlock</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <a href="/Forum/Class/Warrior">Warrior</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button class="add"> add </button>