Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Verwenden von jquery.sortElements zum Implementieren von JavaScript-Fähigkeiten zur Tabellensortierung

Verwenden von jquery.sortElements zum Implementieren von JavaScript-Fähigkeiten zur Tabellensortierung

WBOY
Freigeben： 2016-05-16 16:50:15
Original
912 Leute haben es durchsucht

Die Tabellensortierfunktion muss im Projekt implementiert werden.

Es gibt viele Lösungen online, viele davon basieren auf jQuery.

jquery.tablesorter, Größe 17 KB, aber seine Homepage weist einige Kompatibilitätsprobleme unter IE10 auf.
Datentabellen, 75 KB groß, leistungsstark, mit Paging-, Such- und anderen Funktionen.
Es gibt auch ein Plug-In namens sortElements, das mit nur 3 KB sehr klein ist, eine gute Kompatibilität aufweist und auf Github 818 Sterne hat.

Schließlich habe ich mich für sortElements entschieden, die Implementierung ist sehr einfach:

1. Führen Sie jQuery ein

Code kopieren Der Code lautet wie folgt:


2. Einführung sortElements.js


Code kopieren Der Code lautet wie folgt:


js-Code


Code kopieren Der Code lautet wie folgt:
$(document).ready(function(){
var table = $(' #mytable');//Tabellen-ID
$('#sort_header')//Zu sortierende Header-ID
.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){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : -1;
return this.parentNode;
inverse = ! invers;

});

}); >Code kopieren


Der Code lautet wie folgt:


id="sort_header">Name der EinrichtungTelefonnummer th>Speciality td>
...
Verwandte Etiketten：
table排序
Quelle：php.cn
Vorheriger Artikel：Ein benutzerdefiniertes Dialogfeld-Steuerelement, das ich mit js/jquery_javascript-Kenntnissen geschrieben habe Nächster Artikel：Die Methode zum Konvertieren von Elementen im Formular in Objekte eignet sich für Javascript-Kenntnisse zur Formularübermittlung
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie löst man das Rendern (mit Filter und Paginierung) für die Sortiermethode in React aus? Hier ist meine Sort.js-Stilkomponente: <SortWrapper><SortText>SortBy</SortT...
Aus 2024-04-06 21:28:37
0
1
2257
Verwendung von Eloquent für interne Abfragen Die Bildadresse enthält den Standort und die Gesamtzahl der Benutzer. Users::with(['addres...
Aus 2024-04-06 16:45:50
0
1
515
Wie sortiere ich SQL-Ergebnisse, wenn eine Spalte leer ist? Ich habe eine Frage zur Reihenfolge der Abfrageergebnisse. Ich habe 3 Spalten, die sortier...
Aus 2024-04-05 00:39:32
0
1
317
Wie kann man auf bestimmte Klickereignisse achten, andere jedoch unterdrücken? Meine Webanwendung enthält eine HTML-Tabelle, in der jede Zeile auf eine bestimmte URL ver...
Aus 2024-04-04 16:55:27
0
1
317
Überarbeiteter Titel: Berechnen Sie die Gesamtsumme basierend auf der Auswahl des Kontrollkästchens Ich entwickle eine einfache Anwendung zur Finanzverfolgung. Im Antrag gibt es eine Tabelle...
Aus 2024-04-04 13:45:50
0
1
3465
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage