Tabellen sortieren
Das Skript macht eine HTML-Tabelle sortierbar. Die Spalten können jeweils durch einen Klick auf die Titelzeile sortiert werden. Dazu ist lediglich notwendig der gewünschten Tabelle die CSS-Klasse sortable zu geben und den folgenden Javascript-Code in die Seite einzufügen:
<script type="text/javascript" src="ltrim.js"></script> <script type="text/javascript" src="sort_table.js"></script> <script type="text/javascript" > window.onload = function() { SortTable.init(); } </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 |
|---|---|---|---|---|
| ---------- | 234.2 | zx wert 1 | BB wert | 2007/11/12 |
| 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 |
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
ltrim.js
ähnliche Artikel
- 20. November 2007 -- Klapptabelle mit Javascript (47)
Ziel des Skriptes ist es, grosse Datentabellen übersichtlicher...
- 18. November 2011 -- LED Editor (1)
LED Scroller Chareditor Dieses Skript dient zum...
- 13. Mai 2009 -- String Erweiterungen (5)
Eine der Eigenschaften von Javascript, die sie von...
211621 mal gelesen.
221 Kommentare
Leave a comment »
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.
8. Juli 2010: 15:44
VIELEN DANK.. hier das problem
so nimmt er die nicht an
echo „“;
echo “;
so gehts
echo “;
können my_key attributen gleich sein?!
8. Juli 2010: 15:46
mannn der post frischt ja code
tr
style=background-color:#AAFF7F geht nicht
bgcolor=#AAFF7F geht nicht
tr
class=OddTableRows GEHT
8. Juli 2010: 16:29
neee.. nochmals korrektur… es war tatsächlich der tabellen aufbau… ein ungeschlossenes tr
9. Juli 2010: 10:41
kann man auch beim start nach einem bestimmten feld vorsortieren?!
so wie hier im script
http://www.j-berkemeier.de/TableSort.html
9. Juli 2010: 11:00
Ja, mit [SortTable Object].sort(spalte)
13. Juli 2010: 14:19
zu 99. und 100.:
Habe die Funktion getValue() angepasst, um auch Kommazahlen sortieren zu lassen. Sollen auch Zahlen mit „.“ als Tausendertrenner sortiert werden, kann der Punkt auch einfach rausgefiltert werden, z.B. mit val.replace(/./, „“). parseFloat() ignoriert übrigens Zeichen, die der Zahl folgen und nicht mehr dazugehören, also auch das Eurozeichen.
function getValue(el, ignoreCase, forceString) {
var val = getText(el).trim();
if(forceString) return ignoreCase ? val.toLowerCase() : val;
var f_str = val.replace(/,/, „.“);
var f = parseFloat(f_str);
var d = val.match(DATE_DE);
return isNumber(f_str) ? f : // Zahl
d ? (new Date(d[3], d[2], d[1], d[4], d[5], d[6])).getTime() : // deutsches Datum
!isNaN(Date.parse(val)) ? Date.parse(val) :
ignoreCase ? val.toLowerCase() : val;
}
Gruß Henrik
20. Juli 2010: 11:49
Hey,
super Script. Ich bin echt begeistert. Allerdings probiere ich IP Adressen zu sortieren und das klappt leider nicht. Hast du eine Idee???
Beispiel IP Adressen „Sortiert“
10.64.100.23
10.64.3.120
10.64.1.130
10.64.22.141
Vielen Dank
Gruß Marian
20. Juli 2010: 13:22
Hallo,
ich habe eine Frage,
zuerstmal echt Klasse Skript, gefällt mir und funktioniert super!
Ich habe folgende Tabelle:
[Link auf Wunsch gelöscht]
Ist es möglich das es bei der Sortierung auch den Inhalt der aufgeklappten Zeilen sortiert?
Also vom höchsten/niedrigsten Wert zum niedrigsten/höchsten Wert?
20. Juli 2010: 13:43
@Marian: Das mit den IP Nummern dürfte ausufern. Da es keine JS Funktion dafür gibt, diese in Dezimalzahlen umzuwandeln. Wenn die Tabelle auf dem Server erzeugt wird, könntest du die my_key variante probieren und dort z.b. den Wert mit ip2long()[PHP] reinschreiben
@Hilmi: Ich vermute nicht, dass das was du willst mit meinem Skript möglich ist. Zumindest nicht ohne größere Änderungen.
20. Juli 2010: 14:22
Oh okay,
trotzdem danke für die schnelle Antwort =)
21. Juli 2010: 8:58
Hmmm es müsste doch aber irgendwie möglich sein in das Skript diese Funktion einzubauen, das es auch den Inhalt aufgeklappter Tabellen untersucht und sortiert.
Falls das jemand weiß wie das geht, wäre es sehr nett wenn er hier Bescheid geben würde =)
21. Juli 2010: 9:14
Irgendwie möglich ist das sicher, aber ohne zu Wissen, wie diese Zeilen mit den anderen zusammenhängen und wie du diese Zeilen genau sortieren willst, läßt sich das gar nicht umsetzten.
Aber auch sonst dürfte das Skript ziemlich komplex werden, da in dem Falle vermutlich eine Sortierung innerhalb der sortieren Zeilen nötig wäre. Auf so eine Situation ist das Skript nicht angelegt.
21. Juli 2010: 12:52
Hi,
wie kann ich es machen das jede 2 zeile farbig ist?
Ich habe es jetzt erst mal so gelöst
[<tr class="farbe“>], aber das funktioniert auch nur bis ich die tabelle sortiere ^^
21. Juli 2010: 12:54
ups … das kommentarfeld hat mein php code geschluckt xD ^^
23. Juli 2010: 10:09
Vielen Dank!!!
Genau dieses Script habe ich gesucht. Zuerst hatte ich 2 andere Scripts im Einsatz, eines war viel zu kompliziert, das andere machte Probleme mit Datenbankzugriffen. Mit dem hier klappt alles perfekt!
Übrigens:
Ich musste die Farbe der Icons an die Schriftfarbe der Tabellenüberschrift anpassen. Das ging mit fontcolor():
// Das Element das angezeigt wird, wenn die Spalte abwärts sortiert ist
SortTable.up = String.fromCharCode(9660).fontcolor(„#FFFFFF“);
SortTable.alt_up = ‚Aufwärts sortieren‘;
23. Juli 2010: 10:11
Oh, verdammt bin ich blind :D
dafür gibts ja ne eigene Variable seh ich grade… ;)
// Farbe des Zeichens in der Spaltenüberschrift
SortTable.pointer_color = ‚#FFFFFF‘;
23. Juli 2010: 13:49
Habe doch noch ein Problem für das ich keine Lösung finde.
Die Werte für die Tabelle lese ich per PHP aus einer Datenbank.
Eine Spalte enthält Geldbeträge, die nicht korrekt sortiert werden.
Wenn ich zB die folgenden 3 Werte habe:
8 880.00 €
24 048.00 €
1 764.00 €
…funktioniert die Sortierung nicht korrekt (wie man hier sieht). Was auch noch logisch ist, da es Strings sind und das Script somit keinen Unterschied zwischen einer 5-stelligen und einer 4-stelligen Summe macht.
…
Mein Lösungsansatz war die Strings mit floatval() in Float-Werte zu konvertieren und dann als my_Key Werte mit in die Tabelle zu schreiben:
$feePA = number_format($row[8]*$row[2], 2, ‚.‘, ‚ ‚);
$my_key = floatval($row[8]*$row[2]);
echo “ $feePA €“;
funktioniert aber nicht. Selbst wenn ich den Code soweit wie möglich vereinfache und ohne my_Key arbeite funktionert die Sortierung nicht :(
$feePA = floatval($row[8]*$row[2]);
echo „$feePA“;
Ergebnis:
8880
24048
1764
Was kann daran noch falsch sein?!?
Danke schonmal…
23. Juli 2010: 14:15
Ach Mist, die html tags wurden gefiltert,
hier nochmal mein Posts, wie er eigentlich aussehen sollte:
http://meder-home.de/tablesort.txt
26. Juli 2010: 9:22
Keine Ahung was da schieft läuft. Wie du an dem Beispielcode oben siehst, werden Zahlen ohne Probleme sortiert. Und meine Kenntnisse in PHP sind nicht gut genug um sagen zu können, ob an deinem Code etwas falsch ist oder nicht.
Ich müßte sehen, was der Browser sieht, also was dort im Quelltext steht. Solche Problem treten meistens auf, wenn der HTML Code Fehler enthält.
26. Juli 2010: 10:58
Moin,
hab das Problem gefunden. War wohl etwas überarbeitet am Freitag ;)
Zu Testzwecken hatte ich im th-Element die class=“sort_string“ eingetragen und völlig vergessen sie wieder rauszunehmen.
Ist ja klar, dass Zahlen dann nicht korrekt sortiert werden ;)
Jetzt funktionierts wunderbar. Danke für die Mühe!
Und danke für das geniale Script!!
6. August 2010: 12:23
Hi,
sehr hilfreich der Script. Allerdings habe ich ein kleines Problem beim Sortieren von Einträgen mit Umlauten. Diese werden am Ende (bzw. Anfang) der Tabelle einsortiert. Gibt es ein Workaround wie man diese Einträge Richtig (wie im Telefonbuch) einsortieren könnte?
Danke
25. August 2010: 17:48
[…] ja, z.b. Tabellen sortieren [Javascript ist Toll!] […]
26. August 2010: 12:49
Hallo
gratuliere, ein sehr gutes Script! Leider habe ich dasselbe Problem wie Kati, nämlich die lexikalische Sortierung. Ich bin weit davon entfernt ein JS-Spezialist zu sein, aber ich habe versucht das Problem zu lösen. Nach :
function sort(spalte, desc, ignoreCase, forceString) {
var mySort = function (a, b) {
Habe ich die Sortbegriffe modifiziert nach :
tmp1 = a.value;
tmp2 = b.value;
tmp1 = tmp1.toLowerCase(); // nur Kleinbuchstaben, damit auch grossgeschriebene
tmp2 = tmp2.toLowerCase(); // Umlaute richtig sortiert werden.
var reg = /[äàâéèêöôüûçñ]/g ;
if (reg.exec(tmp1));{
tmp1 = tmp1.replace(/[äàâ]/g, „a“); // Zeichen ersetzen
tmp1 = tmp1.replace(/[éèê]/g, „e“);
tmp1 = tmp1.replace(/[öô]/g, „o“);
tmp1 = tmp1.replace(/[üû]/g, „u“);
tmp1 = tmp1.replace(/ç/g, „c“);
tmp1 = tmp1.replace(/ñ/g, „n“);}
if (reg.exec(tmp2));{
tmp2 = tmp2.replace(/[äàâ]/g, „a“);
tmp2 = tmp2.replace(/[éèê]/g, „e“);
tmp2 = tmp2.replace(/[öô]/g, „o“);
tmp2 = tmp2.replace(/[üû]/g, „u“);
tmp2 = tmp2.replace(/ç/g, „c“);
tmp2 = tmp2.replace(/ñ/g, „n“);}
a.value = tmp1;
b.value = tmp2;
Das scheint zu funktionieren, zumindest für Mitteleuropäer. Sicher kann man das auch besser, eleganter lösen.
26. August 2010: 13:40
Ja, es geht einfacher, ich hab die Sortierfunktion umgeschrieben.
26. August 2010: 16:38
Jetzt geht aber gar nichts mehr! Nicht einmal der Platzhalter im Tab-header für die up-/ down-Pfeile wird erzeugt.
Rico
26. August 2010: 16:50
Hmm, in welchem Browser?
Allen in denen ich getestet habe funktionieren.
26. August 2010: 17:19
Getestet mit FF 3.6.8, IE8, Safari 5.0.1
In keinem Browser funktioniert es! hast du sonst noch was geändert? Im Firebug keine Fehlermeldungen! Es scheint nicht einmal der init läuft mehr. Mein init läuft so :
. Zuvor hat es zumindest so funktioniert.
26. August 2010: 17:30
Ich hab das sowohl hier auf einem Linux Rechner, mit Firefox, Opera und einem Webkit Browser und heute Mittag unter Windows XP dort aber nur mit dem Firefox, getestet.
Geändert habe ich im Prinzip nur eine Zeile.
26. August 2010: 17:33
Ich muss mich entschuldigen.Mir ist ein Lapsus unterlaufen. Im alten Script hatte ich die class geändert. Und im neuen vergessen!
Sorry Rico
26. August 2010: 20:38
ich möchte mich nochmals für dein Script bedanken. Es funktioniert einwandfrei, auch mit der lexikalischen Sortierung.
Bisher hatte ich ein Sortscript im Einsatz, mit dem ich bei grossen Tab. Laufzeitprobleme bekam. Ich habe inzwischen etwa 200 Tab. mit deinem Script versehen.
Eine Kleinigkeit ist mir aufgefallen. Ist es Absicht?
Mit „Text“ steht der up-/down-Pfeil neben dem header-Text
Mit „Text“ unter dem header-Text
Mir gefällt eigentlich die 2. Variante besser.
Rico
26. August 2010: 20:41
wieso werden die HTML-tags im posting gelöscht? Also 1. Beispiel mit nur Zellen-Tag. 2. Beispiel mit Zellen-Tag und Text-Tag (p)
2. September 2010: 2:13
Besten Dank, prima Script. Hatte einige Scripts ausgetestet, aber das hier
klappt am besten. Gruß frank
3. September 2010: 2:31
Hallo, vielen Dank für das Skript; sehr praktisch und leicht einzusetzen. Habe es auch in einem Projekt verwendet; siehe Link!
Viele Grüße
Michael
7. September 2010: 14:37
[…] scheint er durchaus brauchbar zu sein und vor allem schnell. Mein sortTable Skript mit 200 Zeilen läuft mehr als 10x so schnell (100ms gegenüber 1300ms). Da ich aber in der […]
16. September 2010: 19:39
Hallo,
ich möchte die Komplimente oberhalb zu Deinem Skript alle unterstreichen. Und mich bedanken. Ein Problem wo ich nicht weiterkomme: Ich gebe in die th-Elemente noch img-Elemente mit onclick-Ereignis rein. Mittels lightbox erscheinen dann Informationen über den Spalteninhalt. Aber das Ereignis wird durchgereicht, heißt: Zuerst kommt der Info-Text, dann wird die Spalte sortiert was nicht sein soll. Ich habe dem gif onmouseup=“return false;“ verpasst aber das hilft nicht.
Beste Grüße
Viennamade
17. September 2010: 0:45
Dazu kenne ich die Details von der Lightbox zu wenig, um eine Lösung anzubieten. Mein Skript arbeitet so, dass es automatisch das komplette TH Element der Überschrift anklichbar macht. Ich wüßte auch nicht, wie man das deinen Wünschen anpassen könnte.
9. November 2010: 16:18
Hallo
Danke für das super Script! Setzte ich gleich ein…
Gibt es eine Möglichkeit eine zweite Spalte als zweites Sortierkriterium zu verwenden? Ich habe das Problem, dass in einigen Spalten meiner Tabelle viele Werte gleich sind. Zur besseren Dahrstellung würde ich gerne eine zweite Spalte als weiteres Sortierkriterium verwenden (z.B. eine unikate ID), damit die Tabelle etwas „aufgeräumter“ aussieht.
Danke und Gruss
Daniel
9. November 2010: 17:52
Hallo Daniel,
nein, dass geht mit dem Skript nicht. Dazu müßte es entsprechend erweitert werden.
13. November 2010: 0:52
Hallo,
das Script läuft bei mir suoer bis auf 2 Problemem:
1. Zahlen werden falsch sortiert, wenn sie keine null vorweg haben. Also steht die 10 unter der 2. Wenn ich die 2 auf 02 ändere klappt es.
2. Ich habe in manchen td’s per div 2 Zeilen draus gemacht. Jetzt ist das Script natürlich verwirrt und sortiert falsch.
Hast du da ne Lösung für mich?
15. November 2010: 0:15
Hallo!
1. Zahlen werden eigentlich richtig sortiert, wenn nicht, dann liegt das an etwas anderem.
2. Wenn du die Struktur der Tabelle mit anderen Elementen veränderst, dann kann das Skript nicht mehr funktionieren. Es sortiert Datentabellen, wo Daten in Spalten und Reihen gruppiert sind, wenn du etwas anderes machen willst, musst du dir ein entsprechendes Skript programmieren. Das kann dieses hier nicht.
5. Dezember 2010: 22:03
Hallo,
ich bekomme in Firebug immer den Fehler ‚header.rows[0] is undefined‘ (var th = header.rows[0].cells;) in Zeile 114 der sort_table.js. Woran kann das liegen? Ich verstehs nicht wirklich…
Vielen Dank und lg
5. Dezember 2010: 22:07
Hab jetzt nochmal etwas rumprobiert und es scheint an meinem zu liegen….hier der Code:
Code
Anrede
Name
Firma
….
Wenn ich den rausnehme, gehts auf einmal…werden header nicht untersützt? :-O
5. Dezember 2010: 22:40
Doch, der Beispielcode benutzt auch ein head-Element.
28. Dezember 2010: 10:14
Hallo
mit dieser Funkion wird meine Tabelle aufwärts sortiert
SortTable.init().forEach( function(el) {el.sort(3);});
wie bekomme ich es hin diese Spalte 3 oder generell absteigend, beim aufruf der Seite,
sortieren zu lassen.
Danke im Vorraus
Burkhard
31. Dezember 2010: 15:04
Im Prinzip müßte das gehen, in dem du die Funktion zweimal aufrufst.
2. Januar 2011: 6:25
Hab´s so gelöst: sort _table Zeile 134 in var desc = -1; ändern
11. Februar 2011: 11:01
Gibt es eine Möglichkeit, die Hintergrundfarbe bzw. ein Hintergrundbild in dem aktiven Spaltenkopf einzufügen?
11. Februar 2011: 13:38
Ja, diese Möglichkeit habe ich gerade integriert. Der event
onstartübergibt nun, die Referenz auf die Zelle, die angeklickt wurde. Das kann z.b. so integriert werden:var old;tb.onstart = function(t, z) {
this.diff = t;
if(old) old.style.color = '';
z.style.color = 'red'
old = z;
}
30. März 2011: 10:42
Hey Struppi,
erstmal sehr cool dass du hier auch nach Jahren noch Support gibst. Ich habe meine HTML Tabelle nach deiner Anleitung sortierbar gemacht, was super funktioniert hat. Was ich gemacht habe:
1.sort_table.js und ltrim.js runtergeladen
2.
window.onload = function() {
SortTable.init();
}
3.
Jetzt möchte ich dass die Tabelle sofort beim anzeigen nach einer Spalte sortiert ist. Dafür muss ja
SortTable.init().forEach(function(el) {
el.sort(meinespalte);
}
);
eingefügt werden. Nur irgendwie verstehe ich nicht ganz wo genau das hin muss.
30. März 2011: 10:44
Hey Struppi,
erstmal sehr cool dass du hier auch nach Jahren noch Support gibst. Ich habe meine HTML Tabelle nach deiner Anleitung sortierbar gemacht, was super funktioniert hat. Was ich gemacht habe:
1.sort_table.js und ltrim.js runtergeladen
2.
window.onload = function() {
SortTable.init();
}
in header.php
3.
window.onload = function() {
SortTable.init();
}
Vor die Tabelle. Danach war die sortiert! So weit so gut…
Jetzt möchte ich dass die Tabelle sofort beim anzeigen nach einer Spalte sortiert ist. Dafür muss ja
SortTable.init().forEach(function(el) {
el.sort(meinespalte);
}
);
eingefügt werden. Nur irgendwie verstehe ich nicht ganz wo genau das hin muss. Hab alles versucht. Den Code alleine in den Header geschrieben, vor die Tabelle, hinter der Tabelle, mit/ohne
window.onload = function() {
SortTable.init();
}
und sogar aus beiden einen Hybridcode gebastelt aber nichts hat funktioniert :( Wooo muss man das hinschreiben?
MfG
30. März 2011: 10:46
Huch falsch kopiert zu 2. kommt noch
“
„
30. März 2011: 10:47
„script type=“text/javascript“ src=“ltrim.js“></script"
6. Mai 2011: 17:17
[…] sowas auch vor kurzem gesucht und das hier gefunden: Sortieren mit CSS Hoffe das hilft […]
9. Juli 2011: 17:10
Hallo
ich habe dein hervorragendes Script seit ca. 2 Jahren installiert. Funktionierte einwandfrei. Jetzt habe ich auf den neuesten Stand updated. Und es funktioniert nur noch teilweise:
FF OK, Opera OK, IE8 geht nichts!, Google Chrome geht nichts, Safari geht nichts. Bei keinem der nicht funktionierenden Browsern gibt es eine Fehlermeldung, ausser :
var tmp = this.stripNL().ltrim().rtrim(); aus Ltrim.js, „this.stripNL is not a function“
ausserdem habe ich den onload in den body genommen:
hat jemand dasselbe Problem und eine Idee?
Gruss Erich
9. Juli 2011: 20:04
Hallo
das Problem ist z.T. gelöst. Ich hatte den SortTable.init(); im body-tag. Dass es bei einigen Browsern nicht funktionierte lag am init. Den habe ich nun vor das schliessende body-tag gesetzt.
Die Sortierung funktioniert aber bei allen Browsern noch nicht, weil beim erweiterten ltrim immer noch der Fehler :
var tmp = this.stripNL().ltrim().rtrim(); aus Ltrim.js, „this.stripNL is not a function“ erscheint.
Nimmt man die alte ltrim.js dann geht die Sortierung nun in allen Browsern.
Gruss Erich
4. Oktober 2011: 15:56
Hallo,
ich habe mein problem hiermit nicht lösen können. Gibt es irgend eine Modifikation, mit welcher man mit AJAX geladene Tabellen sortieren kann?
Danke im Voraus
Mustapha
7. Oktober 2011: 7:02
Das Script funktioniert schön schnell. Allerdings habe ich am Anfang übersehen das man der Tabelle der Klasse sortable zuordnen muss (@Mustapha).
An dem Script habe ich eine Änderung für mich noch vorgenommen: Ich habe statt der my_key Eigenschaft abbr verwendet, damit mein HTML Standardkonform bleibt.
15. Oktober 2011: 19:38
Moin,
das Sortieren funktioniert leider nicht, wenn ein COLSPAN in einer TD eingetragen ist.
Das COLSPAN benötige ich aber zum Gruppieren.
Gibt es eine Möglichkeit, das zu ändern?
Besten Dank und schöne Grüße
Ralf
19. Oktober 2011: 12:23
Das Skript funktioniert eigentlich mit colspan.
19. Oktober 2011: 23:05
Hallo Struppi,
danke für die Antwort.
Die Spalten vor dem Colspan werden sortiert. wenn ich aber eine zustäzliche Reihe habe, wo die erste Zelle ein Colspan über die gesamte Breite habe, dann ist nur die erste Zelle der ganzen tabelle sortierbar. Danach erscheint ein Fehler: Zeile 193, Objekt ist Null.
Beispiel
Spalte 1Spalte 2
Daten 1Daten 1
Daten 2Daten 2
Gruppe 1
Daten 3Daten 3
Spalte 1 ist sortierbar, Spalte 2 im IE 8 ist es nicht.
Kannst Du das bestätigen?
19. Oktober 2011: 23:07
Sorry, habe nicht gesehen, dass table-Tags nicht erlaubt sind.
In de Zeile ‚Gruppe 1‘ steht -tr- -td colspan=2- Gruppe 1-/td-/tr
Gruß Ralf
20. Oktober 2011: 1:01
Ach, so. Das ist nicht sortierbar, du brauchst natürlich für jede Spalte einen Wert.
26. Oktober 2011: 17:05
Danke für dieses super Script. Es funktioniert alles einwandfrei bis auf die Sortierung einer Spalte mit Preisangaben nach dem Muster:
127,99 €
1,– €
1000,78 €
134,– €
usw.
Hier wird zwar sortiert, aber leider nicht in der gewünschten Reihenfolge sondern recht durcheinander.
Ich habe die funktion getValue() durch die aus Henriks Eintrag (Dienstag 13.Juli 2010: 14:19) ersetzt, dann geht aber keine Spalte mehr zu sortieren. Wäre super wenn mir jemand sagen könnte wie man das Script modifizieren könnte um auch Preisangaben in der dargstellten Form nach Wert sortieren zu können.
Danke schon mal :)
15. November 2011: 1:02
Ich hab folgendes eingebaut: Du musst in der Spalte, in der die Zahlen stehen, dem Header die CSS Klasse ‚locale_de‘ geben, dann werden auch Zahlen mit dem Eurozeichen und einem Komma sortiert.
21. November 2011: 15:54
Hi,
das script funktioniert wirklich super! Danke! Nur bekomme ich es einfach nicht hin meine Tabelle direkt nach dem Datum sortiert anzuzeigen? Wo muss und wie soll ich in meinen Code das:
SortTable.init().forEach(function(el) {el.sort(spalte);
}
);
einfügen? Und wie definiere ich dann die betroffene Spalte und Sortierrichtung genau?
Beste Grüße,
Ich hoffe mir kann noch geholfen werden :D
Tobias
Bisher steht es so mitten im Code:
var t = SortTable.init().forEach(function(el) {
el.sort(5);
}
);
21. November 2011: 20:59
Naja, so wie es im Text steht. In einem onload Event musst du die Zeilen aufrufen. Dann müßte es gehen.
6. Dezember 2011: 16:47
Hallo,
die Skripte sind wirklich super. Ich habe allerdings ein Problem: Ich habe eine Indexspalte in meiner Tabelle, die von der Sortierung ausgeschlossen werden soll. Jedoch würfelt er mir den Index immer wieder durcheinander , wenn ich nach anderen Eigenschaften sortieren möchte.
Kann ich das Skript irgendwie anpassen, sodass er die erste Zeile beim Sortieren immer ignoriert?
Viele Grüße
Jonas
6. Dezember 2011: 21:34
Das geht nicht. Die Tabellenreihen, lassen sich nur als ganzes sortieren.
19. Dezember 2011: 12:46
Hallo,
vielen Dank für dieses Tolle Skript.
Mir ist aber noch ein Fehler aufgefallen.
Bei Zahlenwerten mit . Tausender Trennzeichen und , stimmt die sortierung nicht.
Beispiel:
10.981,35
11.201,91
12.173,45
127.138,22
13.647,90
3.014,00
…
Viele Grüße
Christian
20. Dezember 2011: 11:37
Nein, das ist stimmt schon.
Das sind keine Zahlenwerte und sie werden wie Zeichneketten sortiert. Das ist ein Nachteil meines Skripts, dass den Spalten keine Werte Typen zugeordnet werden können, sondern es versucht automatisch den Typ zu erkennen.
27. Januar 2012: 18:23
Hallo,
Script funktioniert von Anfang an super in der Sortierung der einzelnen Spalten.
Mir ist aufgefallen, dass die Umlaute von „Abwärts“ und „Aufwärts“ im Browser (IE v8, Firefox 3.6) falsch ausgegeben werden. Änderung zu ä bringt nichts.
Bei mir werden Zeichenketten mit/ohne Links differenziert ausgegeben; im obigen Beispiel aber nicht. Was muss ich ändern?
Mehrmals wurde hier die Frage mit dem sortierten Anzeigen gestellt. Ich habe die gleiche Frage. Könnte man ein praktisches Beispiel hier definieren. Die obigen Beispiele habe diese Funktion nicht enthalten.
Nochmlas Danke für das Script.
Viele Grüße
Seewolf
27. Januar 2012: 23:22
1.) Das mit den Umlauten liegt an der Kodierung der Seite, in der du das Skript nutzt. Ich habe alle in utf8 abgespeichert.
2.) Weiß ich nicht. Dazu müßte ich die Seite sehen
3.) Im Text ist ein Beispiel
30. Januar 2012: 21:05
Hallo Struppi,
vielen Dank für den schnellen Support.
1. mit Charset = UTF-8 ist das Problem behoben.
2. Bei mir werden erst alle Einträge ohne Link und dann die mit Link alphabetisch sortiert. Bei dem Beispiel oben spielt der Link aber keine Rolle. Website Domain findest Du im Namen.
3. Sortiert angezeigt funktioniert; Problem war der Spaltenbezeichner. Bei Spalte 2 muss man 1 eintragen.
Gruß vom Seewolf
30. Januar 2012: 23:14
Das Problem liegt an der Funktion, die den HTML Code filtert und wird auch kurz in der sortTable.js beschrieben.
Der HTML Code in den mouseover Attributen läßt sich mit dieser Funktion nicht mehr filtern. Soweit ich das sehe, würde es gehen, wenn das öffnende HTML < Zeichen, als & lt; (o. Leerzeichen) maskiert wird. Zumindest bei meinen lokalen Tests, funktionierte es.
31. Januar 2012: 1:12
3. Das ist nicht so tragisch.
2. Zu früh habe ich mich über die vordefinierte Sortierung gefreut. Diese Funktion wird voll erfüllt in Firefox 3.6 und Opera 11.6. Keine voreingestellte Sortierung erfolgt mit Internet Explorer 8.0 ???
Gruß vom Seewolf
31. Januar 2012: 8:32
Hmm? Das ist schlecht.
Ich habe kein Windows mehr, daher kann ich das nicht testen. Gibt es eine Fehlermeldung? (Leider kann ich dir auch nicht sagen wo die Fehler im IE 8 angezeigt werden, im IE 6 war es ein kleines gelbes Ausrufezeichen in der Statusleiste)
31. Januar 2012: 14:01
Ja, es gibt eine Fehlermeldung wie bei IE6
Details zum Fehler auf der Webseite:
Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1)
Zeitstempel: Tue, 31 Jan 2012 12:57:31 UTC
Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Zeile: 25
Zeichen: 2
Code: 0
31. Januar 2012: 14:05
Zusatz zum IE-Problem; nachfolgend die Konfiguration:
…
window.onload = function() {
SortTable.init().forEach(function(el) {
el.sort(1);
}
);
}
31. Januar 2012: 14:05
Sorry, ich habe ja vergessen, dass nur bestimmte Tags erlaubt sind.
31. Januar 2012: 15:02
Ach, der IE 6. Ja, der kennt .forEach noch nicht. Für den kann man das einbauen:
if(!Array.prototype.forEach){Array.prototype.forEach = function(fun ){
var len = this.length;
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); }; }
1. Februar 2012: 7:42
Script funktioniert hervorragend im IE8.
Danke vom Seewolf
4. April 2012: 20:08
Genau das was ich gesucht habe.Ich bekomme es aber nicht hin das die Sortierung schon beim Start der Tabelle erfolgt. Was muss ich für (spalte) genau eingeben?
Gruß Dirk
10. April 2012: 9:23
Hi Dirk,
du musst die Nummer der Spalte (angefangen bei Null) angeben.
17. Juni 2012: 18:13
Hi!
Erstmal muss ich mich für dieses Skript bedanken! Es ist wirklich super, funktioniert tadellos und ist nebenbei genau das was ich gesucht habe! ;)
Aber eine Frage hätte ich dennoch:
Wenn man die Tabelle schon beim Anzeigen sortiert haben möchte muss man ja die Spalte angeben. Mein Problem ist, dass ich mehrere Tabellen mit unterschiedlicher Spaltenanzahl auf meiner Seite integriert habe und jeweils immer die letzte Spalte vorsortiert haben möchte. Ist das irgendwie möglich?
Danke und MfG,
Pablo
18. Juni 2012: 10:07
Ist ein eingebaut. Dazu muss als Parameter der sort() Funktion – 1 übergeben werden.
18. Juni 2012: 18:18
Danke für die schnelle Antwort und für den Einbau dieser Funktion. Funktioniert super! Jetzt hab ich nur noch eine letzte Frage: Kann man das ganze auch andersrum vorsortieren lassen? Also mit den höchsten Werte oben anstatt wie bisher unten? Falls ja, wie?
grüße,
Pablo
20. Juni 2012: 12:10
In dem Fall einfach die Funktion zweimal aufrufen.
20. Juni 2012: 20:31
Super! Hat geklappt! Danke!
6. Juli 2012: 12:15
was muss den jetzt genau in die CSS datei geschrieben werden damit der ganze spaß klappt :)) danke schonmal im vorraus
17. August 2012: 9:55
[…] […]
9. Oktober 2012: 10:45
Hallo Struppi,
ich weiß nicht ob das ein Bug ist, aber die Tabelle wird nicht richtig sortiert bei gegebenen Bedingungen:
Tabelle mit 14 Spalten.
2 Spalten enthalten ein Datum im Format: DD.MM.YYYY HH:mm
Sortier ich nun nach einer dieser Spalten, so wird richtig sortiert, aber sobald 2 Zeilen das selbe Datum haben und sich nur in der Uhrzeit unterscheiden, wird falsch sortiert.
Meine Tabelle kommt richtig vorsortiert aus der DB… wenn ich dann mit dem Skript sortieren will, wird es teils falsch sortiert.
9. Oktober 2012: 12:16
Danke für den Hinweis.
Es lag natürlich am Skript, ich habe es geändert und es sollte jetzt auch die Uhrzeit beim deutschen Datumsformat berücksichtigen.
24. Oktober 2012: 23:21
Hallo Struppi,
Erstmal DANKE für das tolle Skript! Das erspart mir schon mal viel Arbeit! (hab noch sehr wenig Erfahrung mit javascript)
Ein kleines Feedback hätte ich noch :)
Durch die Berücksichtigung der Uhrzeit beim deutschen Datumsformat werden scheinbar nur noch Daten im Format DD.MM.YYYY HH:mm als Daten erkannt. Alle anderen im Format DD.MM.YYYY werden bei mir einfach als String oder Zahl sortiert.
Leider weiß ich nicht, ob das am Browser liegt, oder am Skript. Benutze selbst Safari und Firefox zum Testen. Dein erstes Beispiel von dir oben wird mir komischerweise richtig sortiert. Wenn ich’s auf meiner Seite versuche, geht’s schief.
Falls noch jemand das gleiche Problem hat, hier meine Lösung:
Hab das ganze jetzt durch eine zweite „Vorlage“ für das deutsche Datumsformat gelöst (in der Datei sort_table.js).
var DATE_DE = /(d{1,2}).(d{1,2}).(d{2,4})/;
var DATE_DE_TIME = /(d{1,2}).(d{1,2}).(d{2,4})s+(d{1,2}):(d{1,2})/;
Entsprechend hab ich dann auch die getValue function angepasst:
var d = val.match(DATE_DE_TIME);
if (!d) {
d = val.match(DATE_DE);
if(d) {
if(!d[4]) d[4] = 0;
if(!d[5]) d[5] = 0;
}
}
„gesucht“ wird jetzt erst nach einem Datum mit Zeit;
wenn keines gefunden wird, wird nach einem Datum ohne Zeit „gesucht“
25. Oktober 2012: 0:49
Es lag am Skript – Danke für den Hinweis!
Ich hab es entsprechend angepaßt, ähnlich wie dein Vorschlag nur das ich die Überprüfung auf beide Möglichkeiten in einen Regulären Ausdruck gepackt habe.
14. Januar 2013: 19:22
hervorragend, funktioniert super, vielen Dank! Den Hinweis, dass man die Zahl der Spalte (angefangen bei 0) eintragen muss, wenn man die Tabelle vorsortiert angezeigt haben möchte, würde ich noch bei der Erklärung ergänzen, ich habe es jetzt nur eher zufällig gefunden…
14. Januar 2013: 20:50
Danke. Stimmt, das muss noch in den Text.
14. Februar 2013: 15:35
Hi struppi,
habe jetzt mit etwas Verspätung dein Skript implemetiert. Es funktioniert auch innerhalb xsl hervorragend.
Einzig, ich muss die JS extern halten und mit src=“xxx.js“ einbinden, da zu viele Zeichen drin sind, die in Konflikt mit wohlgeformten XSL stehen.
Ist aber nur eine Komfortfrage, da sich das betreffende xsl an unterschiedlichen Stellen befinden kann und somit ein relativer Pfad nicht funktioniert.
Frage
Ich suche eine Möglichkeit mehrere Tabellen mit derselben Struktur gleichzeitig sortieren zu lassen, wenn eine davon neu sortiert wird.
Hast du einen schnellen Ansatz?
Funktioniert mit XSL in FF (18.0.2) und IE TAB und IE9.
Gruss Jens
19. Juni 2013: 16:59
Hallo,
ich habe das Script in eine Seite eingebunden. Im neuesten Firefox und Chrome funktioniert es hervorragend. Nicht aber im IE 10. Muss ich da etwas besonderes beachten?
Gruß
Jürgen
19. Juni 2013: 20:47
Nein, bei mir funktioniert es.
21. Juni 2013: 8:58
Moin,
wenn ich ein colgroup in der Tabelle habe, funktioniert die Sortierung leider nicht.
Kann ich irgend etwas ändern?
Danke für eine Info, Raller
Mein Aufbau
table
colgroup
/colgroup
th
tr
td
etc …
21. Juni 2013: 9:33
Sorry, habe das Problem gelöst, hatte ein tr vor colgroup. Jetzt funktioniert es. Raller
26. Juni 2013: 19:58
Hallo Struppi,
sensationelles Skript und sensationeller Support wenn man sich hier so die Kommentare durchliest :-)
Vielen Dank dafür.
Eine Frage hätte ich natürlich auch.
Mit der Klasse „no_sort“ kann man die Möglichkeit der Sortierung ausschalten.
Gibt es auch eine Funktion, das man die Sortierung der Daten in einer Zeile verhindern kann?
Ich möchte in der ersten Zeile eine Nummerierung 1 bis … haben, die unabhängig der Sortierung, mir die Position der Zeile anzeigt.
Danke & Gruß
Oliver
26. Juni 2013: 22:41
Die Firma dankt für’s Lob :-)
Meinst du eine x-beliebige Zeile? Das geht nicht. Wenn du die Zeilen, die sortiert werden sollen, mit einem tbody Element umschliesst, werden die anderen Zeilen nicht sortiert. Reicht das aus?
27. Juni 2013: 11:35
Ich habe mich wohl falsch ausgedrückt, ich meinte natürlich die erste Spalte und nicht Zeile.
Mit tbody und tfoot kann ich ja nur Zeilen ausklammern.
Also zB.
1. blabla 122334 945
2. blibli 364583 843
3. plapla 472819 643
4. glagla 394577 256
5. wlawla 283746 245
usw.
Und hier sollte die erste Spalte mit der Nummerierung 1 bis X erhalten bleiben und der Rest sollte sortiert werden können.
27. Juni 2013: 15:01
Hmm, das ist im Prinzip eine interessante Idee, dürfte aber schwierig umzusetzen sein, da das Skript im Prinzip immer den kompletten DOM Knoten, also die TR Elemente, sortiert. Das von einander zu lösen würde das Skript deutlich langsamer machen.
Mit einem Wort: Nein es geht nicht.
28. Juni 2013: 13:11
Dachte ich mir schon :-(
Hatte dann noch mit einer anderen Variante experimentiert.
Wollte das ganze mit einer Variablen lösen.
So in etwa: document.write( counter++ )
Die ganze Sache müßte dann aber erst nach der Sortierung ausgeführt werden.
Besteht da vielleicht ein Lichtblick?
28. Juni 2013: 14:05
Ich hab’s eingebaut :-)
Und zwar mit Hilfe eines zusätzlichen Events „.onprogress“ der aufgerufen wird, wenn die Elemente umgehängt werden. Eine Nummerierung könnte dann z.b. so ausgeführt werden:
el.onprogress = function(idx, row) { var td = row.cells[0]; td.innerHTML = idx + '.'; };el ist ein Tabellenelement wie oben im Artikel in den Beispielen beschrieben. idx ist die Laufnummer (beginnend bei 0) und row die aktuell umgehängt Tabellenreihe. Wenn du die Nummerierung in der erste Spalte haben willst, dann ist dies cells[0] und mit innerHTML läßt sich dann wie üblich der Inhalt anpassen.
Ich hoffe ich konnte dir weiter helfen?
29. Juni 2013: 16:37
WAAAOOOOOU 8-)
Ich bin begeistert… So etwas findet man heutzutage nicht mehr oft.
Tausend Dank und vielleicht braucht das ja der eine oder andere auch mal.
Gruß
Oliver
30. Juni 2013: 19:26
Ich nochmal :-)
Habe das Skript jetzt nochmal editiert und die Desc-Variable auf Abwärts fixiert ohne Umkehrung.
Vielleicht will du das ja noch als Option für den Config-Bereich mit aufnehmen.
Meine Rangliste läuft jetzt zu mindestens PERFEKT so wie ich es mir vorgestellt habe.
Und nochmal ein GROßES LOB für deine Arbeit und deinen Support.
Bin restlos begeistert davon !!!
Gruß
Oliver
12. September 2013: 10:36
Hallo,
ich habe eine etwas größere Tabelle die unter Umständen auch ein paar hundert Zeilen haben kann. Die Tabelle wird per asp aufgebaut hat aber keine Datenbank als Quelle sondern die Daten werden aus einem unsortierten Array/Collection aufgebaut. Die Sortierung ist wirklich Spitze. Bei eine so großen Tabelle muss der Benutzer aber leider viel scrollen. Hat jemand eine Idee wie die Anzeige auf z.B. 15 Zeilen je Seite begrenzt werden könnte und dann mit einem Klick auf „nächste Seite“ bzw. „vorherige Seite“ geblättert werden könnte? Die Sortierung sollte natütlich erhalten bleiben.
Meine einzige Idee wäre alle nicht gewünschten Zeilen auzublenden:
function onoff (PageIDVis, PageIDCol) {
if (document.getElementById)
document.getElementById(PageIDVis).style.visibility = "visible";
document.getElementById(PageIDCol).style.visibility = "collapse";
}
Leider werden aber die ID ja beim erstellen der Tabelle geschreiben und somit umsortiert. Was dann nicht den gewünschten Effekt bringt.
Bin dankbar für Vorschläge oder Anregungen und natürlich auch für eine Lösung ;)
Gruß Micha
18. Oktober 2013: 21:37
Das Sortieren funktioniert Perfekt!!
Hat jemand einen Tipp, wie man das Script ergänzen kann, damit (bei sehr großen Tabellen) die header-zeile am oberen bildrand fixiet und beim runterscrollen weiterhin angezeigt wird? lg manu
1. Oktober 2016: 17:25
An der Fixierung der Headerzeile wäre ich auch interessiert, zumal das Scriptt bei mir tadellos läuft aber da hier die Einträge vor drei Jahren so plötzlich abgebrochen sind, scheint es „Struppi“ nicht mehr zu geben???
23. Oktober 2016: 15:18
Hallo eki!
Doch – mich gibt es noch, ich bin aber im Moment leider zu krank um mich regelmäßig um den Blog zu kümmern.
Du hast mir ja auch eine email geschrieben und dein Anliegen näher erläutert.
Das mit der Fixierung des headers ist nicht ganz so trivial. Ich habe damals, als ich das Skript schrieb, auch versucht. Es war aber nicht möglich, ohne grosse Verrenkungen für alle Browser eine Fixierung zu realisieren. Wie es nun im Jahre 2016 damit aussieht weiss ich nicht.
Falls ich mich die Tage mal wieder etwas besser fühle versuche ich mal ein paar Dinge und schau mir andere Lösungen an (hast du mal nach „fix table header“ o.ä. gesucht?).
23. Oktober 2016: 17:18
Sorry, meine Bemerkung resultierte eher aus dem Verdacht, dass hier vielleicht ein Studiosi aus dem Fach Informatik für seine Studienarbeit einen Blog gestartet hatte, den er nach dem Studium und dem Eintritt in ein verantwortungsvolles Berufsleben mangels Zeit oder anderer Prioritäten verwaisen ließ (soll des öfteren schon vorgekommen sein ;-)).
Ich danke dir auf jeden Fall, dass du versuchen willst, dich trotz Krankheit/Unwohlsein weiterhin des Themas an zu nehmen.
Natürlich habe ich schon ausgiebig gegoogelt und auch ein paar Optionen wie „fix table header“ (erfolglos) ausprobiert und irgendwo habe ich dann auch gelesen, dass das nicht geht.
Wie ich schon in meiner Mail erwähnte, habe ich so gut wie keine JavaScript-Kenntnisse, habe mich aber fleißig in HTML und CSS eingelesen. Damit habe ich mal die Anzeige von Bildern an einer fixen Position per Pseudoklasse „focus“ realisiert. D. h., wenn ich einen mit der Pseudoklasse definierten Begriff angeklickt habe, wurde mir das zugewiesene Bild angezeigt.
Wenn du die Sortierung in deinem Script nicht nach den Namen in der Headerzeile sondern nach Spaltennummern durchführst, dann könnten die Begriffe wie „Titel“ oder „Interpret“ irgerndwo auf der Seite stehen (Zeile über der Tabelle) und mit einem Klick darauf (onclick?) die Sortierung starten und die Tabelle sortiert wieder an der festen Position einfügen.
Ich vermute, ich habe mich jetzt undeutlich genug ausgedrückt ;-) und wünsche dir erst mal gute Besserung und dann viel Erfolg bei der Lösung.
Gruß ekl
27. Oktober 2016: 9:32
Hallo,
da es Struppi im Moment nicht so gut geht (gute Besserung), hier eine Beispielseite von mir:
http://www.j-berkemeier.de/TableSort_Beispiel2.html
Unten auf der Seite ist eine Tabelle, deren Kopfzeile beim Scrollen stehen bleibt. Das CSS ist leider nicht universell und muss noch an die jeweilige Tabelle angepasst werden. Hier (https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662700#m1662700) wurde das Thema auch behandelt.
Gruß
Jürgen
22. November 2016: 15:32
Hallo Jürgen,
vielen Dank für deine Unterstützung!
Ich konnte meine Tabelle erfolgreich mit wenig Aufwand anpassen und sowohl lokal als auch von meinem Hoster mit Edge, Chrome und FF wie gewünscht anzeigen.:-) (die anderen habe ich nicht probiert)
Vielen Dank und auch von mir nochmal gute Besserung an Struppi
Gruß
ekl
26. Oktober 2021: 19:20
Moin Jürgen,
zunächst danke für das Skript. Klappt – weiterhin – super. Eine Layout-Bitte habe ich noch. Wenn man mit .sort(3) bspw. die vierte Spalte gleich bei Aufruf sortieren lässt, erscheint der Pfeil/Pointer ohne Freiraum gleich hinter dem Spaltennamen in der Titelzeile der Tabelle. Wählt man jetzt eine andere Spalte zum sortieren, wird der Pointer nicht gelöscht. das geschieht auch nicht, wenn man in diesem Beispiel die vierte Spalte erneut sortieren lässt. Jetzt hat man hinter dem Titel zwei Pointer.
Ich bin kein JS-Experte, habe leider nicht finden können, wo der Pointer beim automatischen Sortieren gesetzt wird.
26. Oktober 2021: 19:55
Hm?
Leider kann ich das Problem nicht nachvollziehen.
Hier ein Beispiel: http://struppi.bplaced.net/js/tabelle%20sortieren.html
Die 2. Spalte ist vorsortiert und der Pointer geht weg, wie er es soll.
26. Oktober 2021: 20:00
Ach, ich sehe erst jetzt, dass du dich auf das Skript von Jürgen beziehst. Ob der das hier liest, bezweifle ich. Aber er ist noch im selfhtml forum anzutreffen,
15. September 2024: 22:19
Ich habe eine Tabelle mit Checkboxen in der ersten Spalte, die ich zum Auswählen von Einträgen verwende. Wenn ich die Tabelle sortiere, verschwinden die ausgewählten Checkboxen im $_POST-Array, was dazu führt, dass ich keine Daten mehr abrufen kann. Gibt es eine Möglichkeit, sicherzustellen, dass die ausgewählten Checkboxen auch nach einer Sortierung im $_POST ankommen? Ich wäre dankbar für Tipps oder Lösungen!“,
„refusal
16. September 2024: 7:36
Hallo,
ich bin im Urlaub und kann mir erst in 2 Wochen das genauer anschauen. Hast du ein Beispiel wo man sich das anschauen kann?
Das Neuste
Kategorien
am meisten gelesen
zuletzt kommentiert
Archiv
Wortwolke
Privatsphäre Bugs Datenschutz OOP Firefox google Drag&Drop überwachung Laufschrift Tool Wordpress about:config String LED Browser LED Scroller prototype Animation Javascript linux