Javascript ist Toll!

28. November 2007 - 16:54

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:

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:

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 (45)

    Ziel des Skriptes ist es, grosse Datentabellen übersichtlicher...

  • 18. November 2011 -- LED Editor (1)

    LED Scroller Chareditor Dieses Skript dient zum...

  • 13. May 2009 -- String Erweiterungen (5)

    Eine der Eigenschaften von Javascript, die sie von...

Comments (216)
11091 mal gelesen.

216 Kommentare

Leave a comment »

Seiten:

1. Comment von: Enno
17. May 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

2. Comment von: Struppi
17. May 2008: 16:53

Die Datei heißt in Wirklichkeit ltrim.js, der Link ist neben der von sort_table.js

3. Comment von: Someone
8. July 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.

4. Comment von: Struppi
15. July 2008: 8:07

Danke, ich hab’s so umgebaut.

5. Comment von: Benny
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

6. Comment von: Struppi
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!

7. Comment von: blasco
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ß

8. Comment von: Struppi
29. November 2008: 10:02

Kann ich nicht nachvollziehen, wie machst du sie sortierbar?

9. Comment von: rene
14. March 2009: 19:49

Wie sieht diePerformance mit 3000 Zeilen und 15 Spalten aus?

10. Comment von: Struppi
14. March 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.

11. Comment von: Blues@Sunrise
27. March 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

12. Comment von: Struppi
27. March 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.

13. Comment von: Blues@Sunrise
27. March 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

14. Comment von: Struppi
28. March 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.

15. Comment von: orest
11. April 2009: 9:04

Absolut cooles Teil !!

16. Comment von: Alfie
16. June 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. Comment von: Struppi
17. June 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

18. Comment von: Harmageddon
17. June 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

19. Comment von: Struppi
17. June 2009: 17:40

Oh, deine Tabellenstruktur ist seltsam, warum hast du vor dem theader einen tbody?

20. Comment von: Harmageddon
17. June 2009: 17:42

Den muss mein Programm da rein gemacht haben. Aber es ist immer noch so.

21. Comment von: Struppi
17. June 2009: 17:52

Ja, ich hab’s gemerkt, es fehlt ausserdem das tr-Element im thead, dann sollte es gehen.

22. Comment von: Alfie
17. June 2009: 23:24

Hallo Struppi!
Danke für deinen Tipp zu #16. Leider kommen sich die Scripts immer noch in die Quere.
Alfie

23. Comment von: Struppi
18. June 2009: 8:40

Ich hab keine Ahnung. Bei mir funktioniert die snapshot Vorschau überhaupt nicht.

24. Comment von: Harmageddon
18. June 2009: 12:45

zu #21: Es geht immer noch nicht :-(

25. Comment von: Struppi
18. June 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.

26. Comment von: Alfie
18. June 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). ;-)

27. Comment von: Alfie
18. June 2009: 16:49

#25: Haha, html-tags aus meiner Nachricht entfernt – liest sich daher etwas seltsam.

28. Comment von: Harmageddon
18. June 2009: 17:02

Dankeschön! Endlich hab ichs kapiert.

29. Comment von: RedTuesday
23. June 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
.
.
.

30. Comment von: RedTuesday
23. June 2009: 22:24

Huch, mein Posting ist ja abgeschnitten.

So sehen die Tabellen aus => http://img3.imagebanana.com/view/r3c9erto/tabelle.png

31. Comment von: Struppi
24. June 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.

32. Comment von: RedTuesday
24. June 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.

33. Comment von: Struppi
24. June 2009: 22:52

Was meinst du mit Sortierzeichen? Die Pfeile?
Da könntest du die Elemente entsprechend definieren:
SortTable.up = ”;
SortTable.down = ”;

34. Comment von: RedTuesday
25. June 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.

35. Comment von: Struppi
25. June 2009: 23:14

komisch, wenn ich das mache, ist der Platz leer und nichts verschiebt sich.

36. Comment von: Struppi
26. June 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 ”

37. Comment von: Struppi
26. June 2009: 21:16

Ich hoffe es wird klar was ich damit meine.
Die Kommentarfunktion …. s.o.

38. Comment von: RedTuesday
26. June 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.

39. Comment von: RedTuesday
26. June 2009: 21:53

Ja, danke. Jetzt funktioniert es. :)

40. Comment von: RedTuesday
26. June 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.

41. Comment von: woodele
25. July 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?

42. Comment von: Struppi
27. July 2009: 16:22

Das kann eigentlich nur passieren, wenn deine Spalten zu schmal sind. Der Pointer sollte rechts vom Text sein

43. Comment von: woodele
27. July 2009: 16:49

Kannst Du denn Dir mal bitte diese Seite anschauen “www.malteser-kennel-of-wittenhouse.de/html/vdhzuechterd.html”?

44. Comment von: Struppi
27. July 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.

45. Comment von: woodele
27. July 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?

46. Comment von: Struppi
27. July 2009: 17:33

Nur auf die Kopzeile.
Ich hab mir die Tabellenstruktur nicht genau angeschaut, aber brauchst du unbedingt die Breitenangaben?

47. Comment von: woodele
27. July 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?

48. Comment von: Twilo
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

49. Comment von: Struppi
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.

50. Comment von: Andreas
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

51. Comment von: Struppi
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.

52. Comment von: Jonas
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

53. Comment von: Struppi
28. August 2009: 8:17

Kann ich nicht nachvollziehen, sogar im IE werden die Elemente, bzw. die Werte abgeschickt.

54. Comment von: Jonas
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. ;)

55. Comment von: Frank
16. October 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!

56. Comment von: Johannes
4. January 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

57. Comment von: Ruth
14. January 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

58. Comment von: Struppi
18. January 2010: 14:46

Hallo Ruth!

Ohne Code, kann ich dir leider nicht helfen.

59. Comment von: Francesco
25. January 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?

60. Comment von: Heiner
30. January 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

61. Comment von: Struppi
30. January 2010: 12:57

Ja das geht. Dazu gibt es die Funktion .sort(), als Parameter musst du die Nummer der Spalte angeben.

62. Comment von: Heiner
31. January 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

63. Comment von: Heiner
31. January 2010: 15:09

ups – die links sind direkt übersetzt worden – steht also im Quelltext der Nachricht.

64. Comment von: Struppi
1. February 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.

65. Comment von: Heiner
1. February 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

66. Comment von: Thomas
3. February 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

67. Comment von: Struppi
3. February 2010: 15:30

Die Fehlerkonsole ist wirklich leer?
Du rufst die Funktion SortTable.init(); zum richitgen Zeitpunkt auf?

68. Comment von: Thomas
3. February 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

69. Comment von: Thomas
3. February 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?

70. Comment von: Struppi
3. February 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.

71. Comment von: Thomas
4. February 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

72. Comment von: Struppi
4. February 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.

73. Comment von: Thomas
4. February 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.

74. Comment von: Struppi
4. February 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.

75. Comment von: Markus
8. February 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…

76. Comment von: Struppi
8. February 2010: 8:52

Die Funktion erwartet nur einen Parameter, die Spalte, nach der sortiert werden soll.

77. Comment von: Stefan
11. February 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

78. Comment von: Struppi
13. February 2010: 11:59

hmm, weiß nicht. Es gibt keine Fehlermeldung?

79. Comment von: Prepaider
2. March 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…

80. Comment von: Struppi
2. March 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.

81. Comment von: Tomsky
21. March 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

82. Comment von: Michael
26. March 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

83. Comment von: Struppi
30. March 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.

84. Comment von: Michael
31. March 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.

85. Comment von: Struppi
31. March 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.

86. Comment von: Struppi
31. March 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 :-(

87. Comment von: Michael
31. March 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

88. Comment von: Andreas
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

89. Comment von: Struppi
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.

90. Comment von: Andreas
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

91. Comment von: Alex
14. May 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

92. Comment von: Alex
14. May 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!

93. Comment von: Struppi
16. May 2010: 23:29

Um deinen ersten Wunsch zu erfüllen, musst du die Zeile:

var desc = 1;

in

var desc = -1;

umändern.

Das Zweite, müßte sich durch das folgende bewerkstelligen lassen

SortTable.up = '';
..
SortTable.down = '';
94. Comment von: Henrik
8. June 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

95. Comment von: MHN
29. June 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

96. Comment von: Edu
8. July 2010: 13:34

kann es sein das es auch ein Limit an zeilen gibt?! bei mir kommt ab ca 200 nix mehr

97. Comment von: Struppi
8. July 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

98. Comment von: Edu
8. July 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) {

99. Comment von: Edu
8. July 2010: 14:53

noch eine frage.. ich hab ein formatiertes zahlenformat.. (bin java neuling)

1.999 €

wie kann ich das umwandeln für sortieren

100. Comment von: Struppi
8. July 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.

101. Comment von: Edu
8. July 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?!

102. Comment von: Edu
8. July 2010: 15:46

mannn der post frischt ja code

tr
style=background-color:#AAFF7F geht nicht
bgcolor=#AAFF7F geht nicht

tr
class=OddTableRows GEHT

103. Comment von: Edu
8. July 2010: 16:29

neee.. nochmals korrektur… es war tatsächlich der tabellen aufbau… ein ungeschlossenes tr

104. Comment von: Edu
9. July 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

105. Comment von: Struppi
9. July 2010: 11:00

Ja, mit [SortTable Object].sort(spalte)

106. Comment von: Henrik
13. July 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

107. Comment von: Marian
20. July 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

108. Comment von: Hilmi
20. July 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?

109. Comment von: Struppi
20. July 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.

110. Comment von: Hilmi
20. July 2010: 14:22

Oh okay,
trotzdem danke für die schnelle Antwort =)

111. Comment von: Hilmi
21. July 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 =)

112. Comment von: Struppi
21. July 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.

113. Comment von: Breitling
21. July 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 ^^

114. Comment von: Breitling
21. July 2010: 12:54

ups … das kommentarfeld hat mein php code geschluckt xD ^^

115. Comment von: Vince
23. July 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’;

116. Comment von: Vince
23. July 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’;

117. Comment von: Vince
23. July 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…

118. Comment von: Vince
23. July 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

119. Comment von: Struppi
26. July 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.

120. Comment von: Vince
26. July 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!!

121. Comment von: Kati
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

122. Pingback von: Time limit ? - XHTMLforum
25. August 2010: 17:48

[…] ja, z.b. Tabellen sortieren [Javascript ist Toll!] […]

123. Comment von: Rico
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.

124. Comment von: Struppi
26. August 2010: 13:40

Ja, es geht einfacher, ich hab die Sortierfunktion umgeschrieben.

125. Comment von: Rico
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

126. Comment von: Struppi
26. August 2010: 16:50

Hmm, in welchem Browser?
Allen in denen ich getestet habe funktionieren.

127. Comment von: Rico
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.

128. Comment von: Struppi
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.

129. Comment von: Rico
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

130. Comment von: 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

131. Comment von: 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)

132. Comment von: Frank
2. September 2010: 2:13

Besten Dank, prima Script. Hatte einige Scripts ausgetestet, aber das hier
klappt am besten. Gruß frank

133. Comment von: Michael
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

134. Pingback von: Safari versus Firefox [Javascript ist Toll!]
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 […]

135. Comment von: Viennamade
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

136. Comment von: Struppi
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.

137. Comment von: Daniel
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

138. Comment von: Struppi
9. November 2010: 17:52

Hallo Daniel,

nein, dass geht mit dem Skript nicht. Dazu müßte es entsprechend erweitert werden.

139. Comment von: Yusuf
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?

140. Comment von: Struppi
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.

141. Comment von: TheWolf
5. December 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

142. Comment von: TheWolf
5. December 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

143. Comment von: Struppi
5. December 2010: 22:40

Doch, der Beispielcode benutzt auch ein head-Element.

144. Comment von: Burkhard
28. December 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

145. Comment von: Struppi
31. December 2010: 15:04

Im Prinzip müßte das gehen, in dem du die Funktion zweimal aufrufst.

146. Comment von: Burkhard
2. January 2011: 6:25

Hab´s so gelöst: sort _table Zeile 134 in var desc = -1; ändern

147. Comment von: eky79
11. February 2011: 11:01

Gibt es eine Möglichkeit, die Hintergrundfarbe bzw. ein Hintergrundbild in dem aktiven Spaltenkopf einzufügen?

148. Comment von: Struppi
11. February 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;
}

149. Comment von: Chewbacca
30. March 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.

150. Comment von: Chewbacca
30. March 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

151. Comment von: Chewbacca
30. March 2011: 10:46

Huch falsch kopiert zu 2. kommt noch

152. Comment von: Chewbacca
30. March 2011: 10:47

“script type=”text/javascript” src=”ltrim.js”></script"

153. Pingback von: Sortieren einer XML in PHP - php.de
6. May 2011: 17:17

[…] sowas auch vor kurzem gesucht und das hier gefunden: Sortieren mit CSS Hoffe das hilft […]

154. Comment von: Erich
9. July 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

155. Comment von: Erich
9. July 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

156. Comment von: Mustapha
4. October 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

157. Comment von: Someone
7. October 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.

158. Comment von: Ralf
15. October 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

159. Comment von: Struppi
19. October 2011: 12:23

Das Skript funktioniert eigentlich mit colspan.

160. Comment von: Ralf
19. October 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?

161. Comment von: Ralf
19. October 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

162. Comment von: Struppi
20. October 2011: 1:01

Ach, so. Das ist nicht sortierbar, du brauchst natürlich für jede Spalte einen Wert.

163. Comment von: Holmqvist
26. October 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 :)

164. Comment von: Struppi
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.

165. Comment von: Tobias
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);

}
);

166. Comment von: Struppi
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.

167. Comment von: Jonas
6. December 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

168. Comment von: Struppi
6. December 2011: 21:34

Das geht nicht. Die Tabellenreihen, lassen sich nur als ganzes sortieren.

169. Comment von: spielkind
19. December 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

170. Comment von: Struppi
20. December 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.

171. Comment von: Seewolf
27. January 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

172. Comment von: Struppi
27. January 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

173. Comment von: Seewolf
30. January 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

174. Comment von: Struppi
30. January 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.

175. Comment von: Seewolf
31. January 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

176. Comment von: Struppi
31. January 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)

177. Comment von: Seewolf
31. January 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

178. Comment von: Seewolf
31. January 2012: 14:05

Zusatz zum IE-Problem; nachfolgend die Konfiguration:

window.onload = function() {
SortTable.init().forEach(function(el) {
el.sort(1);
}
);
}

179. Comment von: Seewolf
31. January 2012: 14:05

Sorry, ich habe ja vergessen, dass nur bestimmte Tags erlaubt sind.

180. Comment von: Struppi
31. January 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); }; }

181. Comment von: Seewolf
1. February 2012: 7:42

Script funktioniert hervorragend im IE8.

Danke vom Seewolf

182. Comment von: Dirk
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

183. Comment von: Struppi
10. April 2012: 9:23

Hi Dirk,

du musst die Nummer der Spalte (angefangen bei Null) angeben.

184. Comment von: Pablo
17. June 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

185. Comment von: Struppi
18. June 2012: 10:07

Ist ein eingebaut. Dazu muss als Parameter der sort() Funktion – 1 übergeben werden.

186. Comment von: Pablo
18. June 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

187. Comment von: Struppi
20. June 2012: 12:10

In dem Fall einfach die Funktion zweimal aufrufen.

188. Comment von: Pablo
20. June 2012: 20:31

Super! Hat geklappt! Danke!

189. Comment von: Mark
6. July 2012: 12:15

was muss den jetzt genau in die CSS datei geschrieben werden damit der ganze spaß klappt :)) danke schonmal im vorraus

190. Pingback von: Einfacher BubbleSort funktioniert nicht
17. August 2012: 9:55

[…] […]

191. Comment von: Eugen
9. October 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.

192. Comment von: Struppi
9. October 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.

193. Comment von: Michael
24. October 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”

194. Comment von: Struppi
25. October 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.

195. Comment von: zan
14. January 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…

196. Comment von: Struppi
14. January 2013: 20:50

Danke. Stimmt, das muss noch in den Text.

197. Comment von: Jens
14. February 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

198. Comment von: Jürgen Kehr
19. June 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

199. Comment von: struppi
19. June 2013: 20:47

Nein, bei mir funktioniert es.

200. Comment von: Raller
21. June 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 …

201. Comment von: Raller
21. June 2013: 9:33

Sorry, habe das Problem gelöst, hatte ein tr vor colgroup. Jetzt funktioniert es. Raller

202. Comment von: Oliver
26. June 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

203. Comment von: struppi
26. June 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?

204. Comment von: Oliver
27. June 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.

205. Comment von: struppi
27. June 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.

206. Comment von: Oliver
28. June 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?

207. Comment von: struppi
28. June 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?

208. Comment von: Oliver
29. June 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

209. Comment von: Oliver
30. June 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

210. Comment von: Michael
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

211. Comment von: manu
18. October 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

212. Comment von: ekl
1. October 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???

    213. Comment von: struppi
    23. October 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?).

214. Comment von: ekl
23. October 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

215. Comment von: Jürgen
27. October 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

216. Comment von: ekl
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

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful