Tabellen sortieren
Das Skript macht eine HTML Tabelle sortierbar. Die Spalten können durch einen Klick auf die Titelzeile sortiert werden. Dazu ist es nur nötig, der gewünschten Tabelle, die CSS-Klasse sortable zuzuweisen 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> |
Das Objekt SortTable erzeugt alle notwendigen Events. Die Header Zeilen können angeklickt werden und die Spalte wird sortiert. Das Skript erkennt folgende Daten in den Tabellenzellen:
- Strings
- Zahlen
- Strings und Zahlen in HTML Tags - zum sortieren werden die Tags gelöscht
- Datum -
Das Datum kann entweder ein Format sein, das mit Date.parse() umgewandelt werden kann oder das in Deutschland übliche Format:
DD.MM.YYYY. Die Formate können beliebig gemischt werden - Input Felder - eine Spalte kann auch nach dem Inhalt eines Inputtextfeldes sortiert werden
Konfiguration
Die Konfiguration des Skriptes kann angepaßt werden. Dazu können folgende Werte überschrieben werden.
// 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); SortTable.alt_up = 'Abwärts sortieren'; SortTable.alt_down = 'Aufwärts sortieren'; // Farbe des Zeichens in der aktiven Spalte SortTable.pointer_color = '#222';
Im HTML Code der Tabelle kann mit speziellen Markern die Sortiereigenschaften geändert werden.
Spalten nicht sortieren
Die Klasse no_sort im Headerelement (TH oder TD) verhindert das 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 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, 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 Zeichenktte 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 Zeichneketten behandelt und entsprechend sortiert.
<th class="sort_string">... </td> |
Events
Es können die Event Handler onstart und onsort benutzt werden. Den Events wird als Parameter lediglich die aktuelle Zeit übergeben.
Mir ist bisher kein besserer eingefallen
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'); |
} |
} |
); |
} |
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
| spalte 1 | spalte 2 | spalte 3 | spalte 4 | spalte 5 |
|---|
Download
Die folgenden zwei Javascript Dateien müssen eingebunden werden:
sort_table.js
ltrim.js
9728 mal gelesen.
120 Kommentare Einen Kommentar hinterlassen »
Kommentare
Samstag 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
Samstag 17.Mai 2008: 16:53
Die Datei heißt in Wirklichkeit ltrim.js, der Link ist neben der von sort_table.js
Dienstag 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.
Dienstag 15.Juli 2008: 8:07
Danke, ich hab's so umgebaut.
Mittwoch 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
Mittwoch 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!
Samstag 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ß
Samstag 29.November 2008: 10:02
Kann ich nicht nachvollziehen, wie machst du sie sortierbar?
Samstag 14.März 2009: 19:49
Wie sieht diePerformance mit 3000 Zeilen und 15 Spalten aus?
Samstag 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.
Freitag 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
Freitag 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.
Freitag 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
Samstag 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.
Samstag 11.April 2009: 9:04
Absolut cooles Teil !!
Dienstag 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
Mittwoch 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
Mittwoch 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
Mittwoch 17.Juni 2009: 17:40
Oh, deine Tabellenstruktur ist seltsam, warum hast du vor dem theader einen tbody?
Mittwoch 17.Juni 2009: 17:42
Den muss mein Programm da rein gemacht haben. Aber es ist immer noch so.
Mittwoch 17.Juni 2009: 17:52
Ja, ich hab's gemerkt, es fehlt ausserdem das tr-Element im thead, dann sollte es gehen.
Mittwoch 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
Donnerstag 18.Juni 2009: 8:40
Ich hab keine Ahnung. Bei mir funktioniert die snapshot Vorschau überhaupt nicht.
Donnerstag 18.Juni 2009: 12:45
zu #21: Es geht immer noch nicht
Donnerstag 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.
Donnerstag 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).
Donnerstag 18.Juni 2009: 16:49
#25: Haha, html-tags aus meiner Nachricht entfernt - liest sich daher etwas seltsam.
Donnerstag 18.Juni 2009: 17:02
Dankeschön! Endlich hab ichs kapiert.
Dienstag 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
.
.
.
Dienstag 23.Juni 2009: 22:24
Huch, mein Posting ist ja abgeschnitten.
So sehen die Tabellen aus => http://img3.imagebanana.com/view/r3c9erto/tabelle.png
Mittwoch 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.
Mittwoch 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.
Mittwoch 24.Juni 2009: 22:52
Was meinst du mit Sortierzeichen? Die Pfeile?
Da könntest du die Elemente entsprechend definieren:
SortTable.up = '';
SortTable.down = '';
Donnerstag 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.
Donnerstag 25.Juni 2009: 23:14
komisch, wenn ich das mache, ist der Platz leer und nichts verschiebt sich.
Freitag 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 ”Freitag 26.Juni 2009: 21:16
Ich hoffe es wird klar was ich damit meine.
Die Kommentarfunktion .... s.o.
Freitag 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.
Freitag 26.Juni 2009: 21:53
Ja, danke. Jetzt funktioniert es.
Freitag 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.
Samstag 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?
Montag 27.Juli 2009: 16:22
Das kann eigentlich nur passieren, wenn deine Spalten zu schmal sind. Der Pointer sollte rechts vom Text sein
Montag 27.Juli 2009: 16:49
Kannst Du denn Dir mal bitte diese Seite anschauen "www.malteser-kennel-of-wittenhouse.de/html/vdhzuechterd.html"?
Montag 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.
Montag 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?
Montag 27.Juli 2009: 17:33
Nur auf die Kopzeile.
Ich hab mir die Tabellenstruktur nicht genau angeschaut, aber brauchst du unbedingt die Breitenangaben?
Montag 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?
Mittwoch 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
Donnerstag 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.
Donnerstag 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
Freitag 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.
Donnerstag 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
Freitag 28.August 2009: 8:17
Kann ich nicht nachvollziehen, sogar im IE werden die Elemente, bzw. die Werte abgeschickt.
Freitag 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.
Freitag 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!
Montag 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
Donnerstag 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
Montag 18.Januar 2010: 14:46
Hallo Ruth!
Ohne Code, kann ich dir leider nicht helfen.
Montag 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?
Samstag 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
Samstag 30.Januar 2010: 12:57
Ja das geht. Dazu gibt es die Funktion .sort(), als Parameter musst du die Nummer der Spalte angeben.
Sonntag 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
Sonntag 31.Januar 2010: 15:09
ups - die links sind direkt übersetzt worden - steht also im Quelltext der Nachricht.
Montag 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.
Montag 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
Mittwoch 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
Mittwoch 3.Februar 2010: 15:30
Die Fehlerkonsole ist wirklich leer?
Du rufst die Funktion SortTable.init(); zum richitgen Zeitpunkt auf?
Mittwoch 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
Mittwoch 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?
Mittwoch 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.
Donnerstag 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
Mfg
Donnerstag 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.
Donnerstag 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.
Donnerstag 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.
Montag 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...
Montag 8.Februar 2010: 8:52
Die Funktion erwartet nur einen Parameter, die Spalte, nach der sortiert werden soll.
Donnerstag 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
Samstag 13.Februar 2010: 11:59
hmm, weiß nicht. Es gibt keine Fehlermeldung?
Dienstag 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...
Dienstag 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.
Sonntag 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
Freitag 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
Dienstag 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.
Mittwoch 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.
Mittwoch 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.
Mittwoch 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
Mittwoch 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
Freitag 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
Dienstag 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.
Dienstag 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
Freitag 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
Freitag 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!
Sonntag 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
Dienstag 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
Dienstag 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
Donnerstag 8.Juli 2010: 13:34
kann es sein das es auch ein Limit an zeilen gibt?! bei mir kommt ab ca 200 nix mehr
Donnerstag 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
Donnerstag 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) {
Donnerstag 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
Donnerstag 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.
Donnerstag 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?!
Donnerstag 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
Donnerstag 8.Juli 2010: 16:29
neee.. nochmals korrektur... es war tatsächlich der tabellen aufbau... ein ungeschlossenes tr
Freitag 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
Freitag 9.Juli 2010: 11:00
Ja, mit [SortTable Object].sort(spalte)
Dienstag 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
Dienstag 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
Dienstag 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?
Dienstag 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.
Dienstag 20.Juli 2010: 14:22
Oh okay,
trotzdem danke für die schnelle Antwort =)
Mittwoch 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 =)
Mittwoch 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.
Mittwoch 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 ^^
Mittwoch 21.Juli 2010: 12:54
ups ... das kommentarfeld hat mein php code geschluckt xD ^^
Freitag 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';
Freitag 23.Juli 2010: 10:11
Oh, verdammt bin ich blind
dafür gibts ja ne eigene Variable seh ich grade...
// Farbe des Zeichens in der Spaltenüberschrift
SortTable.pointer_color = '#FFFFFF';
Freitag 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...
Freitag 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
Montag 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.
Montag 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!!
Einen Kommentar hinterlassen