Tabellen sortieren
Das Skript macht eine HTML-Tabelle sortierbar. Die Spalten können jeweils durch einen Klick auf die Titelzeile sortiert werden. Um das zu erreichen, ist nach Einbindung des Skripts, lediglich notwendig der gewünschten Tabelle die CSS-Klasse sortable zu geben. eingebunden wird dann das Skript:
<script type="text/javascript" src="../pfad/sort_table.js"></script> <script type="text/javascript" > window.addEventListener('load', () => SortTable.init, false); </script> |
Der Aufruf von SortTable.init() erzeugt alle notwendigen Events für die jeweiligen Tabellen. Die Header Zeilen können angeklickt werden und die Spalte wird sortiert. Das Skript sortiert nach folgenden Daten in den Tabellenzellen:
- Zeichenketten (Umlaute werden erkannt)
- Zahlen (Mit dem Punkt als Dezimalzeichen)
- Zeichenketten und Zahlen in HTML Tags - zum sortieren werden die Tags intern gelöscht
- Zeichenketten und Zahlen in Formularfeldern
- Datum -
Das Datum kann entweder ein Format sein, das mit Date.parse() umgewandelt werden kann oder das in Deutschland häufig übliche Format:
DD.MM.YYYY(optional kann danach auch die Uhrzeit folgen). Die Formate können beliebig gemischt werden
Konfiguration
// Die Bezeichnung der Klasse der Tabelle SortTable.className = 'sortable'; // Das Element das angezeigt wird, wenn die Spalte abwärts sortiert ist SortTable.up = String.fromCharCode(9650); // Das Element das angezeigt wird, wenn die Spalte aufwärts sortiert ist SortTable.down = String.fromCharCode(9660); // die dazugehörigen Texte SortTable.alt_up = 'Abwärts sortieren'; SortTable.alt_down = 'Aufwärts sortieren'; // Farbe des Zeichens in der aktiven Spalte SortTable.pointer_color = '#222'; |
Spalten nicht sortieren
Die Klasse no_sort im Headerelement (TH oder TD) verhindert, dass die entsprechende Spalte sortiert werden kann.
Sortierwerte unabhängig vom Feldinhalt
Mit dem Attribut my_key in einer bestimmten Zelle kann
ein Sortierwert unabhängig vom Inhalt verwendet werden. (Der Code ist dadurch aber nicht mehr valide)
z.b:
<td my_Key="10">zehn</td> |
Groß- und Kleinschreibung ignorieren
Hat das title-Attribut der Headerzeile den Wert ignore_case oder ein Attribut mit dem gleichen Namen (auch dadruch wird der HTML Code invalide), wird ohne Berücksichtigung der Groß- und Kleinschreibung sortiert.
<th title="ignore_case">... </td> |
Reihen nicht sortieren
Alle Reihen, die entweder nicht in einem tbody Element stehen
oder in einem tfoot Element, werden nicht sortiert.
Alle Werte wie eine Zeichenkette sortieren
Wenn in einer Spalte Zahlen und Zeichenketten stehen, wird diese falsch sortiert. Deshalb kann die Spalte im Header markiert werden, dann werden alle Werte wie Zeichenketten behandelt und entsprechend sortiert.
<th class="sort_string">... </td> |
Events
Das Skript fügt dem SortTable Objekt folgende Eventhandler hinzu:
onstart- wird am Anfang der Sortierung aufgerufenonsort- wird am Ende der Sortierung aufgerufenonprogress- wird während des Sortiervorgangs aufgerufen. Als Parameter werden der aktuelle Sortierindex (Start:0) und das aktuelle DOM Objekt, das zuletzt sortiert wurde, übergeben.
Damit läßt sich eine statische Nummerierung einbauen.
window.onload = function () { SortTable.init().forEach( function(el) { el.onstart = function(t) { this.diff = t; } el.onsort = function(t) { alert('sortiert ' + this.length() + ' Zeilen in ' + (t - this.diff) + 'ms'); } } ); } |
Tabelle automatisch sortieren
Spalten können durch Aufruf der Methode .sort(spalte) sortiert werden. Dabei wird als Parameter die Spaltennummer, beginnend mit Null, übergeben.
Um die Tabelle direkt nach dem anzeigen zu sortieren, muss bei der Initialisierung die Methode .sort() aufgerufen werden.
// dieser Aufruf muss im HTML Code NACH der zu sortierenden Tabelle erfolgen. SortTable.init().forEach(function(el) { el.sort(spalte); } ); |
Beispiel
Das Beispiel zeigt eine Tabelle mit einigen unterschiedlichen Feldern, einer Fußzeile und eine Spalte, die nicht sortiert werden kann und einem my_key Wert in einer Zelle. Ausserdem wurden die oben gezeigten Events eingebaut.
| mit einem Inputfeld | Zahlen | unsortierbar | mit einem Link u. ohne Groß/Klein | Datum |
|---|---|---|---|---|
| 11. | 101 | wert 3 | wert 74 | 2007/11/12 |
| 2. | 100 | owert 3 | wert 34 | 2007/11/11 |
| 3. | 75 | owert 2 | wert 24 | 12.12.2007 |
| 4. | 666 | wert 3 | wert 04 (my_key:zzzz) | 2007/11/12 |
| 234 | wert -3 | wert 14 | 2007/11/1 | |
| 6. | 234.1 | x wert 1 | ba wert | 2007/11/12 |
| 7. | 234.01 | bb wert 1 | ab wert | 2006/11/12 |
| 8. | 234.02 | zy wert 1 | Ba wert | 2007/11/12 |
| 9. | 234.15 | zz wert 1 | bb wert | 2007/11/12 |
| ---------- | 234.2 | zx wert 1 | BB wert | 2007/11/12 |
Grosse Tabelle
Nachfolgend noch eine etwas größere Tabelle, um die Geschwindigkeit des Sortierers zu zeigen. Ausserdem enthält eine Spalte mit Umlauten, seit der Version 2.9.2 werden diese richtig sortiert.
Download
Die folgenden zwei Javascript Dateien müssen eingebunden werden:
sort_table.js
ähnliche Artikel
- 20. November 2007 -- Klapptabelle mit Javascript (47)
Ziel des Skriptes ist es, grosse Datentabellen übersichtlicher...
- 28. November 2024 -- Animierte Tabellen Sortierung (10)
Aufgrund einer Frage bei meinem alten Tabellensortierer-Skript...
- 18. November 2011 -- LED Editor (1)
LED Scroller Chareditor Dieses Skript dient zum...
228587 mal gelesen.
226 Kommentare
direkt zum Formular »
Seiten:
17. Mai 2008: 14:15
Tolle Seite erstmal!
Aber bei diesem Script bekomme ich immer den Fehler: trim.js fehlt, diese muss auch noch eingebunden werden … wo kommt das denn her?
Gruß
Enno
17. Mai 2008: 16:53
Die Datei heißt in Wirklichkeit ltrim.js, der Link ist neben der von sort_table.js
8. Juli 2008: 16:07
Hi,
cooles Gimmick diese sort-funktion.
du solltest allerdings die Asc/desc-Icons genau umdrehen… Wenn der Pfeil oben dünner ist als unten, dann nennt man das aufsteigend, weil oben das a und unten das z kommt.
15. Juli 2008: 8:07
Danke, ich hab’s so umgebaut.
26. November 2008: 9:40
Hi,
erstmal danke für das super Script. Nur habe ich jetzt ein Problem. Sobald man mehrere Tabellen auf der gleichen Seite hat, erkennt er auch die und zeigt die Pfeile an wenn man draufklickt. Wie könnte man das beheben?!
Danke
26. November 2008: 10:03
Das war ein Bug, bzw. ich hatte die Prüfung auf den Klassennamen aus der Funktion rausgenommen, was aber Unsinn war. Sie ist jetzt wieder drin und sollte jetzt funktionieren.
Vielen Dank für den Hinweis!
29. November 2008: 2:34
irgendwie funktionieren tabellen, die man per javascript, bzw. über ajax erzeugt und in einen späteren verlauf ins dom einhängt nicht mit der sortierfunktion.
ist das irgendetwas bekannt?
gruß
29. November 2008: 10:02
Kann ich nicht nachvollziehen, wie machst du sie sortierbar?
14. März 2009: 19:49
Wie sieht diePerformance mit 3000 Zeilen und 15 Spalten aus?
14. März 2009: 19:56
Das könnte Grenzwertig werden (je nach Rechner), 5 Spalten sortiert das Skript noch unter akzeptablen 2 Sekunden. Ein Testskript ist hier, das läßt sich auch erweitern.
27. März 2009: 22:48
Hallo
Das ist genau die Art Tabelle die ich suche. Bin noch Anfänger und habe eine Frage betr. den Daten die sortiert werden. Wo schreibe ich die rein?
Also z.B. „wert 04 (my_key:zzzz) “ von Tabelle weiter oben?
Wäre super wenn mir jemand helfen könnte.
Gruss
27. März 2009: 23:13
myKey (die Schreibweise im Beispiel ist falsch) ist ein Attribut im HTML Code, mit der du die Zelle nach einem anderen Wert, als dem Inhalt sortieren kannst.
Ansonsten wird die Tabelle nach den Werten sortiert, die in den Zellen stehen.
27. März 2009: 23:51
Hallo Struppi
Das Problem ist, dass ich keine Ahnung von html und CSS habe. Ich habe mir eine Webseite mit einem WYSIWYG Programm gemacht (WebsiteX5).
Ich habe nun folgendes gemacht:
1. In Excel eine Tabelle erstellt und als html gespeichert.
2. den html Code in meine Seite eingefügt und dann dein Skript ganz oben
usw. als CSS eingefügt.
3. die zwei js angehängt und das ganze hochgeladen.
Die Tabelle „bewegt“ sich aber nicht.
Was mache ich falsch. Wäre super wenn du mir noch einige Tipps geben kannst, die Tabelle ist nämlich genial.
Liebe Grüsse
28. März 2009: 1:02
Die Tabelle hat den Klassennamen ’sortable‘?
werf mal einen Blick in die Fehlerkonsole (sofern du Firefox als Browser benutzt), dort steht was evtl. schief läuft.
11. April 2009: 9:04
Absolut cooles Teil !!
16. Juni 2009: 14:42
Hallo Struppi!
Tolles Script! Ich verwende auf einigen meiner Seiten das Script von http://www.snap.com/ zur Anzeige von Vorschauseiten. Sobald ich eine Tabelle sortiere (zB hier: http://bebac.at/news/2009-06-12.htm) funktioniert die Vorschau-Funktion nicht mehr. Irgendwelche Tipps?
Alfie
17. Juni 2009: 15:54
Ja! Das eingebundene Skript von snapshot braucht den window.onload Event, den du auch verwendest um meins zu intialisieren. Die einfachste Lösung wäre, wenn du den Code im HTML Code hinter die Tabelle schreibst:
<script type=“text/javascript“>
SortTable.init();
</script>
Also ohne onload
17. Juni 2009: 17:36
Kann mir bitte jemand sagen, was ich hier falsch gemacht habe? Hier noch die Javascript-Dateien: ltrim.js und sort_table.js
17. Juni 2009: 17:40
Oh, deine Tabellenstruktur ist seltsam, warum hast du vor dem theader einen tbody?
17. Juni 2009: 17:42
Den muss mein Programm da rein gemacht haben. Aber es ist immer noch so.
17. Juni 2009: 17:52
Ja, ich hab’s gemerkt, es fehlt ausserdem das tr-Element im thead, dann sollte es gehen.
17. Juni 2009: 23:24
Hallo Struppi!
Danke für deinen Tipp zu #16. Leider kommen sich die Scripts immer noch in die Quere.
Alfie
18. Juni 2009: 8:40
Ich hab keine Ahnung. Bei mir funktioniert die snapshot Vorschau überhaupt nicht.
18. Juni 2009: 12:45
zu #21: Es geht immer noch nicht :-(
18. Juni 2009: 16:45
Jetzt hast du ein tfoot Element eingebaut, die werden nicht sortiert. Wozu baust du den diese Elemente ein? Mein Skript funktioniert auch ohne die.
18. Juni 2009: 16:48
#24: Klar, du must nur durch ersetzen. Header und Footer werden nicht sortiert.
#23: Seltsam. Bei mir funktioniert die Vorschau unter W2K SP4 (IE6.0.2800.1106 alle patches, Seamonkey 1.1.4), XP Pro SP3 (IE6.0.2900.5512 alle patches, Seamonkey 1.1.16), Vista SP1 (IE7 alle patches, Seamonkey 1.1.16). ;-)
18. Juni 2009: 16:49
#25: Haha, html-tags aus meiner Nachricht entfernt – liest sich daher etwas seltsam.
18. Juni 2009: 17:02
Dankeschön! Endlich hab ichs kapiert.
23. Juni 2009: 22:21
Hallo Struppi,
ist es möglich mit diesem Script auch Tabellen zu sortieren die man per Open Office.org erzeugt und als html gespeichert hat?
Diese .html Datein sind =>
Die Tabellen selber sehen folgendermaßen aus:
…
<TD
.
.
.
23. Juni 2009: 22:24
Huch, mein Posting ist ja abgeschnitten.
So sehen die Tabellen aus => http://img3.imagebanana.com/view/r3c9erto/tabelle.png
24. Juni 2009: 8:41
(Reminder: ich müßte mal an der Kommentarfunktion ein bisschen arbeiten. Zumindest dazu schreiben, dass HTML gefiltert wird.)
Theoretisch müßte es gehen. Aber OO speichert das HTML der Tabellendokumente komplex ab. In Form einer grossen Tabelle. Wenn diese aber nur daten enthält und die erste Zeile die Spaltentitel, dann funktioniert mein Skript. Ob das bei dir der Fall ist, kann man auf dem Bild aber nciht erkennen.
24. Juni 2009: 20:24
Hallo,
erstmal Danke für die Antwort. Ich habe es gestern noch zum laufen gebracht. Funktioniert wunderbar. Was müsste ich eigentlich eingeben wenn ich keine Sortierzeichen in meiner Tabelle haben möchte?
Schönen Tag noch.
24. Juni 2009: 22:52
Was meinst du mit Sortierzeichen? Die Pfeile?
Da könntest du die Elemente entsprechend definieren:
SortTable.up = “;
SortTable.down = “;
25. Juni 2009: 20:00
Hallo,
genau die meine ich. :) Allerdings funktioniert die Sortierfunktion nicht mehr wenn ich es wie folgt definiere:
SortTable.up = ”;
SortTable.down = ”;
Nur wenn ich zwei Anfrührungszeichen setze kann sortiert werden. Das Problem dabei ist allerdings das dann zwar kein Pfeil mehr angezeigt wird, der Platz den die Pfeile einnehmen würden, aber nach wie vor belegt ist, wodurch sich meine Tabelle dann verschiebt.
25. Juni 2009: 23:14
komisch, wenn ich das mache, ist der Platz leer und nichts verschiebt sich.
26. Juni 2009: 21:14
Du hast ein “ statt zwei ‚ verwendet. Das lag an WordPress, da geht meiner Meinung nach WordPress manchmal zuweit mit dem Umwandeln. Ich habe zwei
''verwendet und WP macht daraus ”26. Juni 2009: 21:16
Ich hoffe es wird klar was ich damit meine.
Die Kommentarfunktion …. s.o.
26. Juni 2009: 20:31
Hallo,
hier einmal meine Tabelle die ich sortieren möchte (bei der ich die Pfeile ausgestellt habe) :
[Link gelöscht]
Sowie der direkte Link zu der Javascript-Datei =>
[Link gelöscht]
Bestimmt habe ich irgendetwas übersehen oder vergessen.
26. Juni 2009: 21:53
Ja, danke. Jetzt funktioniert es. :)
26. Juni 2009: 22:06
P.S. Ich musste aber noch…
var no = String.fromCharCode(160,160,160,160);
…in…
var no = “;
…ändern, damit sich meine Zellen nicht mehr verschieben.
So, jetzt habe ich hier aber genug Platz verbraucht. *g* Schönes Wochenende wünsche ich.
25. Juli 2009: 12:34
Hi Struppi, genau das habe ich gesucht; Danke. Es funktioniert auch, ABER der Pointer rutscht bei mir in jeder Kopfzelle in eine 2. Zeile und dort linksbündig, fügt also quasi ein HTML- ein und das ist unschön. Wo oder wie bekomme ich ihn rechts vom Text?
27. Juli 2009: 16:22
Das kann eigentlich nur passieren, wenn deine Spalten zu schmal sind. Der Pointer sollte rechts vom Text sein
27. Juli 2009: 16:49
Kannst Du denn Dir mal bitte diese Seite anschauen „www.malteser-kennel-of-wittenhouse.de/html/vdhzuechterd.html“?
27. Juli 2009: 17:06
Du musst die Breitenangabe anpassen. Das Skript fügt den Pointer automatisch ein und deine Angaben für die Spaltenbreiten sind etwas zu knapp.
27. Juli 2009: 17:30
Angenommen es würde in einer Spalte nicht reichen, machen dann die anderen aus Sympathie mit?
Und die 2. Frage: Bezieht sich der ‚Platzmangel nur auf die Kopfzeilen oder auch die folgenden?
27. Juli 2009: 17:33
Nur auf die Kopzeile.
Ich hab mir die Tabellenstruktur nicht genau angeschaut, aber brauchst du unbedingt die Breitenangaben?
27. Juli 2009: 17:48
Ich hatte keine Angaben gemacht, nur die Tabelle mit 750 und das bei 3 Spalten mit den Texten „Zwingername“, „Stadt“ und „Züchter“. Jetzt habe ich off-line 220, 250 und 330 und den gleichen Effekt. Ich habe zwar nur ganz, ganz wenig Ahnung, aber ich kann mir nicht vorstellen, dass es in diesem Fall am Platz in den Kopfzellen liegt; aber wo sonst?
5. August 2009: 21:45
Hallo,
ich habe ein „kleines“ Problem
http://www.twilo.de/sort.htm
1. wie kann ich es erreichen, dass die Überschrift, die alle 20 Zeilen wiederholt wird, nicht mit sortiert wird?
2. allgemein sortiert er etwas komisch… wenn ich auf GKZ klicke, erhalte ich ständig ein anderes Sortierergebnis (die Überschriften werden immer unterschiedlich einsortiert)
3. die Sortierung von zahlen, die ein Tausenderpunkt haben, ist etwas „schräg“ – Beispiel Zeile ggg (116.959; 136.986; 14.310; 14.573; 18.189; 19.497; 217.030; 22.179; …)
4. Zahlen mit ein Komma haben ein ähnliches Problem – Beispiel Zeile sss (34,195; 37,690; 7.422; 8,663; …)
Was läuft da schief?
mfg
Twilo
6. August 2009: 10:08
1. Nur in dem du das Skript entsprechend modifizieren würdest, was aber relativ kompliziert werden wird.
2. kann ich dir nicht beantworten, ich bin momentan im Urlaub und nicht am heimischen Rechner, ich kann daher nicht ausführlich testen.
3 und 4. Zahlen mit einem Komma als Dezimalzeichen oder einem Punkt als Tausendertrennzeichen, sind keine Zahlen, sondern Zeichenketten und werden nach den Regeln für Zeichenketten sortiert. Du musst diese Zahlen entweder umwandeln oder ‚mykey‘ verwenden.
13. August 2009: 15:19
Hallo,
danke, das Skript hat mir sehr geholfen und funktioniert sehr gut. Ich habe aber noch zwei Fragen:
1. Ist es möglich schon beim Laden der Seite eine Spalte standardmäßig zu sortieren (und somit einen Pfeil anzuzeigen)? Dann sieht man auch direkt, dass die Spalten sortierbar sind.
2. Irre ich mich, oder sind die Texte in „SortTable.alt_up“ und „SortTable.alt_down“ vertauscht? Ich gehe davon aus, dass der Text anzeigt, was passiert, wenn ich auf die Spalte klicke.
Grüße
Andreas
14. August 2009: 9:39
so. Ich hab eine Funktion eingebaut um 1. möglich zu machen. In der Initialisierungsfunktion kann jetzt folgendes geschrieben werden:
SortTable.init().forEach( function(el) {el.sort(spalte);});zu 2.: ich hab den Text mal umgedreht, Danke.
27. August 2009: 21:20
Hi!
Ich habe, glaube ich, einen Bug gefunden. Ich benutze das Skript für eine Tabelle, die in der ersten Spalte Checkboxen enthält. Das Ganze füttert ein Formular mit Daten. Die Checkboxen fasse ich über einen Namen DeletebyId[] zu einem Array zusammen, das ich mit entsprechenden Werten je nach Checkboxstatus füllen möchte. Wenn man die Tabelle unsortiert lässt, funktioniert alles super. Sobald ich jetzt aber eine Sortierung durchlaufen lasse, kommt im $_POST der gesamte Array gar nicht mehr an. Gibt es eine Möglichkeit, das in den Griff zu kriegen?
Viele Grüße,
Jonas
28. August 2009: 8:17
Kann ich nicht nachvollziehen, sogar im IE werden die Elemente, bzw. die Werte abgeschickt.
28. August 2009: 12:45
Na ja, ich hab das mit Firefox und Safari getestet. Vielleicht funkt mir aber auch irgendwas anderes rein, ist mittlerweile ein recht komplexes Webinterface. Ich hab das jetzt umgangen, indem ich hidden Inputs unter die Tabelle gesetzt habe, deren Wert von den Checkboxen verändert wird. Damit funktioniert es wunderbar. ;)
16. Oktober 2009: 21:56
Vielen Dank für das tolle Skript!!! Ich hatte erst ein anderes getestet, aber das kam mit tags nicht zurecht.
Also super!
4. Januar 2010: 16:01
Moin, habe das Script auf Sortieren von Datum mit Zeit im Format dd.mm.yyyy – hh:ii erweitert:
- in SortTable(): var DATETIME_DE = /(d{1,2}).(d{1,2}).(d{2,4}) - (d{1,2}):(d{2})/; - in getValue(): var dt = val.match(DATETIME_DE); und vor dem d ?: dt ? (new Date(dt[3] + '/' + dt[2] + '/' + dt[1] + ' ' + dt[4] + ':' + dt[5] + ':00')).getTime():Gruss
Johannes
14. Januar 2010: 20:56
Hallo Struppi,
ich habe nach dem Einbinden deines Scrips ein Problem:
die th-Zeile wird als unterste angezeigt, paradoxerweise im Firefox (im IE sieht es richtig aus).
Deshalb gehe ich davon aus, dass ich, als völliger JS-Nicht-Kenner, einen Fehler gemacht habe.
Ich habe die den JS-Code im head-tag eingebunden. Danach kommen einige Tabellen, die nicht sortiert
weden sollen und dann diejenige, die die sortable-class hat.
Nach den Breitenangaben im colspan-Tag kommt die tr mit den th-Einträgen, der aus Gründen, die ich
nicht verstehe zu unterst angezeigt wird, danach der Rest.
Was mache ich falsch?
Grüße,
Ruth
18. Januar 2010: 14:46
Hallo Ruth!
Ohne Code, kann ich dir leider nicht helfen.
25. Januar 2010: 12:35
Bezüglich Kommentare 48 und 49:
In Zeile 164 von sort_table.js anstatt
var val = getText(el).trim();
das hier schreiben:
var val = getText(el).replace(/./g, „“).trim();
Löst zumindest das Problem. Geht das noch besser?
30. Januar 2010: 12:03
wirklich super cooles und nützliches Script!!!
Ist es möglich, die Sortierfunktion durch ein anderes Event auszulösen?
Also nicht, durch klicken auf den Spaltenkopf.
Mir schwebt da sowas wie „onclick“ in einer Tabellenzeile vor.
Dadurch könnte ich die Tabelle automatisch neu sortieren lassen,
wenn sich in einer Zelle ein Wert ändert.
Ein „Click“ auf den Spaltenkopf wäre dann nicht notwendig.
Leider weiß ich nicht, wie ich den onclick schreiben soll.
Für einen Tipp wäre ich sehr dankbar.
Vielen Dank schon jetzt!
Heiner
30. Januar 2010: 12:57
Ja das geht. Dazu gibt es die Funktion .sort(), als Parameter musst du die Nummer der Spalte angeben.
31. Januar 2010: 15:07
Vielen Dank – das habe ich schon probiert – hat leider nicht funktioniert.
Ich bin leider nicht der JavaScript-Fuchs – deshalb weiß ich nicht genau,
wie man die innere Funktion sort() aufruft.
also neu sortieren oder ähnlich funktioniert bei mir nicht.
ergoogeln konnte ich, daß innere Funktionen nur über die äußere Funktion zugänglich sind.
Somit müßte ich doch eigendlich sowas machen:
neu sortieren
Jetzt habe ich noch gesehen, daß du in Deinem Tipp nicht sort()
geschrieben hast, sondern .sort() – mit Punkt davor.
Ist das ein besonderer Trick?
Also – wie muss ich das genau in das onclick reinschreiben,
damit ich die funktion von außen direkt aufrufen kann.
Ein weiterer Tipp wäre sehr nett.
Vielen Dank schon jetzt.
Viele Grüße
Heiner
31. Januar 2010: 15:09
ups – die links sind direkt übersetzt worden – steht also im Quelltext der Nachricht.
1. Februar 2010: 12:20
.sort() ist eine Methode des SortTable Objekts. Du musst an der von dir gewünschten Stelle einen Aufruf der entsprechenden Instanz einbauen.
Das kann relativ komplex werden, wenn du nicht jeder Zelle einzeln einen click Event verpassen willst, was aber auch nicht zu empfehlen ist, da das bei einer grossen Tabelle lange dauern kann.
Ohne Kenntnisse in JS wirst du das nicht umsetzen können.
1. Februar 2010: 16:52
ich habs hinbekommen.
habe die normale function im script einfach mit neuem Namen kopiert und die Variable des Zählers verändert und in jeder Tabellenzeile einen Button eingefügt, der die Function aufruft. Ich glaube, daß es in meinem Script nur deshalb funktioniert, weil ich nur eine kurze Tabelle drin habe. Ist wahrscheinlich nicht „lege artis“, aber das Script verhält sich nun so, wie ich mir das vorgestellt hatte. Naja – auf jeden Fall werde ich mich in Zukunft mehr mit JavaScript beschäftigen. Deine Scripte machen wirklich Spaß. Also nochmal vielen vielen Dank für Deine tolle Programmierleistung und Hilfestellung.
Heiner
3. Februar 2010: 15:11
Hi,
versuche grad dein script einzubauen aber es will nich klappen :(.
Habe die Datein im Ordner, den Script-Schnitzel von dir eingrfügt und meine tabelle auf ‚class=“sortable“‚ gestellt.
Wir keine fehlermeldung angezeigt kann aber nirgend in meiner tabelle klicken /tabelle übernimmt alles aus einer Datenbank!
Was hab ich vergessen/falsch gemacht?
Danekschön
3. Februar 2010: 15:30
Die Fehlerkonsole ist wirklich leer?
Du rufst die Funktion SortTable.init(); zum richitgen Zeitpunkt auf?
3. Februar 2010: 15:40
Naja ich seh keinen Fehler :)
Der Codeschnipsel steht bei mir direkt nach meinem link zu css datei.
Hab mir ma den queltext der test tabelle angeschaut aber noch nix gefunden..
Hier ma meine tabelle, vielleicht liergts an der art, wie ich mysql eingebunden hab:
ID
Nummer
Status
Änd-Ind
Bezeichnung
Eing
Datum
Ausg
Datum
Bestand
Lagerort
Gerät
Bemerkung
3. Februar 2010: 15:43
Da kam was nit mit ^^
dann eben so ich bezieh die ganzen daten aus mysql über nen fetch_array($adressen_query)
Überschrifetn stehn im thead und zweite reihe kommt dann alles mit den variablen etc.
also meien tabelle hat nur 2 reihen im code… is das schlimm?
3. Februar 2010: 15:56
Woher die Daten kommen spielt für Javascript keine Rolle. Wenn du keinen fehler in der Fehlerkonsole siehst, dann ist wohl der Aufruf der init() Funktion falsch.
4. Februar 2010: 10:56
Mh ok,
also nochmal alles was ich gemacht habe (vielleicht erkennt man dann den fehler):
1.habe deinen Codeschnipsel in meinen code eingefügt undzwar direkt nach der angabe wo meine css datei liegt.
2.auf der selben seite meiner tabelle ‚class=“sortable“‚ zugewiesen
3. hab meine tabell mit thead, und tbody eingeteilt.
Und nun steinigt mich für das was ich vergessen habe :D
Mfg
4. Februar 2010: 11:17
Mir ist nicht klar, was du mit „deinen Codeschnipsel“ meinst? Und was in deiner Auflistung fehlt ist, ob du die notwendigen zwei JS Dateien eingebunden hast.
4. Februar 2010: 11:24
„…und den folgenden Javascript Code in die Seite einzufügen.“
der code von dir (am anfang der seite ^^)
detein liegen im selben ordner und werden ja mit deinem code (denn ich codeschnipsel nenne) eingebunden.
4. Februar 2010: 12:04
OK, verstanden. Dann funktioniert es auch, wenn nicht, dann machst du etwas falsch, was es ist erschließt sich aber aus deinen Schilderungen nicht. Tut mir leid ich kann dir nicht helfen.
8. Februar 2010: 0:04
Aloha.
Also erstma, dass Skript ist echt super :)
Aber. könnte es sein, dass ein kleiner Fehler drin ist? Irgendwie macht es keinen unterschied, ob ich .sort(x,1) oder .sort(x,0) oder sonstwat nutze…
8. Februar 2010: 8:52
Die Funktion erwartet nur einen Parameter, die Spalte, nach der sortiert werden soll.
11. Februar 2010: 20:09
Hi,
Erstmal wirklich gutes Script.
Habe nur folgendes Problem.
Ich habe auf einer Seite eine Userliste mit Ajax basierter Pagination.
Die update_user.php die mir aufgrund der Paramter die neue Tabelle aufbaut wird beim ersten laden der Seite inkludiert. In der update_user.php hab ich der tabelle die klasse sortable zugeordnet.
in der inkludierenden datei (manage_users.php) steht am ende ein script tag mit folgendem inhalt:
updateUsers = function(url){
$(‚loading-bar‘).show();
new Ajax.Updater(‚user-list‘, url, true, {method: ‚get‘,
onComplete: function(){
$(‚loading-bar‘).hide();
SortTable.init();
SortTable.pointer_color = ‚#FFFFFF‘;
}});
}
SortTable.init();
SortTable.pointer_color = ‚#FFFFFF‘;
funktioniert auch wunderbar beim ersten laden der seite wird die sortierung dran gehängt.
wenn ich jedoch auf die nächste seite wechsel, wird die init() funktion aus irgendeinem Grund nicht mehr ausgeführt.
Aber eigentlich müsste es doch über den onComplete Callback der Updater Funktion stattfinden, da ja auch die ‚loading-bar‘ ausgeblendet wird.
Irgendwelche Tips?
Lg Stefan und nochmal danke für dieses geniale Script
13. Februar 2010: 11:59
hmm, weiß nicht. Es gibt keine Fehlermeldung?
2. März 2010: 0:48
Hi Leute,
ich hab das script auch eingebaut. (Nicht auf der aktuellen Seite sondern auf einer Testseite)
Das Problem ist, es kann keine kommastellen sortieren?
Z.B. in einer spalte 9 Ct, 15 ct, 7,5 ct usw…
Er sortiert wenn dann die 9ct ganz nach oben oder die 15ct… die 7,5ct klappen nicht…
Was kann ich machen? Habs schon mit 09 ct, 07,5 ct und 15 ct gemacht, dann klappts… sieht aber bekloppt aus mit den 07,5 ct…
2. März 2010: 15:08
das sind keine Zahlen, sondern Zeichenketten. Wenn du nach den Zahlen sortieren lassen willst, musst als Wert die reine Zahl mit einem Punkt als Komma eintragen.
21. März 2010: 20:31
Klasse das Teil! Hast du super gemacht, das hat mir viel Arbeit erspart. Ein kleines Zuckerl wäre noch wenn man z.b. erst nach Spalte a sortieren könnte und dann mit dieser Sortierung zusätzlich noch nach Spalte b. Egal, das was du hier abgeliefert hast ist wirklich geil!
Tomsky
26. März 2010: 14:06
Wirklich ganz genial gelöst!
Aber ich habe ein Problem mit meiner Tabelle, soweit funktioniert alles wunderbar, nur in Spalte 6 funktioniert die Sortierung falsch, in Spalte 7 nur teilweise richtig.
Woran kann das liegen?
Die Tabelle ist unter
http://www.ecmtest.de/ets/daten/dioden/switchunten.html
Wie gibt es noch die Möglichkeit nach dem Sortieren jede zweite Tabellenzeile farbig zu hinterlgen, ähnlich wie es hier oben bei dem Beispiel „große Tabelle“ der Fall ist.
Michael
30. März 2010: 16:04
Das Problem ist, dass die Spalten inhalte haben, die sowohl als Zahl, als auch als Zeichenkette interpretiert werden können.
Das war ein Manko an meinem Skript, ich hab es erweitert. Du musst die Spalten, die Zeichenketten und Zahlen enthalten, mit der CSS Klasse sort_string markieren.
31. März 2010: 17:39
Hallo Struppi,
vielen Dank für Deine Hilfe!
Jetzt funktioniert es schon besser, in Spalte 6 funktioniert die Sortierung jetzt Richtig, in Spate 7 ist noch ein kleiner Fehler. MiniMelf wird da ganz oben bzw. ganz unten angezeigt.
31. März 2010: 18:34
Das liegt jetzt wiederum daran, dass du in den HTML Tags Tooltips mit HTML Code aufrufst. Diese auszufiltern wäre relativ aufwändig. Wenn du stattdessen Entities benutzt, geht zumindest das sortier-Skript.
31. März 2010: 18:48
Ich hab‘ noch mal genauer geschaut. Es liegt nicht an den HTML Tags unmittelbar. Sondern an den HTML Tags, die innerhalb von Anführungszeichen in Anführungszeichen geschachtelt sind. Und da versagt auch die etwas bessere Prüfung, die ich mittlerweile eingebaut habe :-(
31. März 2010: 20:00
Hallo Struppi,
vielen Dank für Deine rasche Hilfe!
Das Tool ist trotzdem sehr cool und hilfreich!
Das mit den Tooltips werde ich dann anders lösen!
Michael
16. April 2010: 13:21
Hallo Struppi,
ich bekomme neuerdings vom IE8 eine Javascript-Fehlermeldung: „Das Objekt unterstützt diese Eigenschaft oder Methode nicht“. Die Meldung kommt, wenn ich beim Starten mit „SortTable.init().forEach( function(el) {el.sort(2);});“ sortieren lassen möchte. Beim Firefox gibt es keine Probleme. Hast du eine Idee, was das Problem sein könnte?
Gruß, Andreas
20. April 2010: 9:37
Hmm, kann es sein, dass der IE auch in der Version 8, kein Array.prototype.forEach kennt? Dann musst du das explizit einabuen.
20. April 2010: 14:09
Danke für den Tipp, das war es. Ich habe jetzt vor dem onload folgenden Code eingefügt:
if (!Array.prototype.forEach)
{
Array.prototype.forEach = function(fun /*, thisp*/)
{
var len = this.length >>> 0;
if (typeof fun != „function“)
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
fun.call(thisp, this[i], i, this);
}
};
}
Dann klappt es auch im IE…
Gruß
Andreas
14. Mai 2010: 22:37
Hallo,
das Script funktioniert hervorragend, vielen Dank.
Nun habe ich eine Frage:
Wie schwer wäre es, zu bewirken, dass beim ersten Klick vom Größten zum Kleinsten sortiert wird – und nicht andersherum, wie es bisher der Fall ist?
Vielen Dank im Voraus,
Alex
14. Mai 2010: 23:00
Oh, und noch etwas: Kann ich verhindern, dass der jeweilige Pfeil angezeigt wird? Also .. natürlich wird es möglich sein, aber ich bin selbst nicht in der Lage, es zu tun. Meine eigentliche Frage ist also, ob mein Wunsch ein großer Aufwand ist und ob mir jemand die betreffende Stelle im Code dazu aufzeigen kann.
Danke nochmals!
16. Mai 2010: 23:29
Um deinen ersten Wunsch zu erfüllen, musst du die Zeile:
in
umändern.
Das Zweite, müßte sich durch das folgende bewerkstelligen lassen
8. Juni 2010: 15:20
Klasse Script, danke Struppi! Soll eine Spalte nicht nur nach Datum sondern auch nach Zeit (z.B. 08.06.2010 15:12:54) sortiert werden, kann folgende Zeilen ändern:
von
var DATE_DE = /(d{1,2}).(d{1,2}).(d{2,4})/;
zu
var DATE_DE = /(d{1,2}).(d{1,2}).(d{2,4})(?: (d{2}):(d{2}):(d{2}))?/;
und von
d ? (new Date(d[3] + ‚/‘ + d[2] + ‚/‘ + d[1])).getTime():
zu
d ? (new Date(d[3], d[2], d[1], d[4], d[5], d[6])).getTime():
Habe es allerdings noch nicht mit Spalten getestet, die nur das Datum ohne Zeit enthalten.
Gruß Henrik
29. Juni 2010: 3:02
Erstmal recht vielen Dank für das script Struppi.
Du hast mir damit sehr geholfen.
Ich habe es ein wenig modifiziert, als zweifarbige Zebra-Tabelle mit hervorgehobener Zeile bei mouseover.
falls es Dich reizt: http://www.terra-neurotica.de/JavaScript/hover-zebra.html
Mit dem IE zickt sie noch etwas, tja nichts ist vollkommen ;-)
(IE stellt für keine css-border-styles aus der .odd class dar, netscape sehr wohl)
Gerne darfst Du Dich daran auslassen oder die code-Schnipsel auf Deiner Seite verwenden, wenn Du magst.
Grüße
wohlfühlen
8. Juli 2010: 13:34
kann es sein das es auch ein Limit an zeilen gibt?! bei mir kommt ab ca 200 nix mehr
8. Juli 2010: 13:39
Nein, es gibt prinzipiell kein Limit, ausser der Rechenleistung. Ich hab hier einen testcase mit 2000 Zeilen http://javascript.jstruebig.de/js/sort_table_test.html
8. Juli 2010: 14:50
ok… evtl ist das problem auch an anderer stelle… im firefox sortiert es einfach nicht… im IE8 kommt folgende script fehlermeldung >>
Meldung: ‚undefined‘ ist Null oder kein Objekt
Zeile: 181
Zeichen: 3
Code: 0
URI: http://localhost/aktuell2/js/sort_table.js
das ist folgende zeile
function getText(td) {
if(td.getAttribute(‚my_key‘)) { <<<<<< 0) {
8. Juli 2010: 14:53
noch eine frage.. ich hab ein formatiertes zahlenformat.. (bin java neuling)
1.999 €
wie kann ich das umwandeln für sortieren
8. Juli 2010: 15:16
Die Fehlermeldung kommt, wenn deine HTML Struktur fehlerhaft ist, bzw. nicht jede Zeile die gleiche Anzahl von Spalten hat.
Das Format ist schwierig, da Javascript (nicht Java) diese Zahl als 1,999 erkennt, bzw. durch die Währungseinheit als Zeichenkette interpretiert. Darauf ist das Skript nicht vorbereitet, die einzige Lösung in dem jetzigen Entwicklungstand wäre, jeder Zelle ein my_key Attribut mit der Zahl, nach der sortiert werden soll, zu geben.