Möchte eine einfache Tabelle mit benutzerdefinierter Sorteierung

[xyladecor]

Guten Morgen in die Runde,

ich bin kein wirklicher Profi was Webseiten angeht, habe bislang meine Seiten fast nur noch frontpage gemacht, das reicht mir normal, da ein Großteil ja nur einfach Listen sind. (http://www.concertwonderland.de)

Jetzt habe ich auf folgender Seite eine Art von Tabelle gesehen die mir gut gefällt, da man dort die Ansicht der Spalten (Liga, Platz, Stadiongröße, Imagestärke, etc.) entsprechend durch anklicken selbst sortieren lassen kann.

https://www.ksm-soccer.de/freieVereine

Auf meiner Seite habe ich aktuelle eine ganz einfache Liste mit Radiosendungen erstellt und frage mich wie ich es als Laie hinbekomme die Liste ebenso hinzubekommen, sodass der Betrachter z.B. nach Datum oder z.B. nach Sendernamen sortieren lassen kann, oder nach Laufzeit, je nachdem nach welchen Kriterien er das möchte.

https://bonustrack.lima-city.de/vintageradio.htm

Ich hoffe ich habe mich nicht zu umständlich ausgedrückt. Wie kann ich das hinbekommen, oder ist das ein zu großer Aufwand für einen Ahnungslosen?

Vielen Dank für jegliche Tipps.

[daniel5959]

Hallo,

das geht mit Javascript, allerdings kenne ich mich mit Javascript nicht aus, aber das muss man auch nicht unbedingt.

Einfach mal bei Google suchen nach "html tabellen sortieren" und einige Beispiele finden, z.B.

>> https://werner-zenk.de/javascript/ht..._sortieren.php

Ich denke das Beispiel mit 4 Spalten dürfte passen und kann leicht auf 5 Spalten und mehr erweitert werden.

daniel5959

[Sempervivum]

Für diesen Zweck haben sich Datatables vielfach als eine Art Quasi-Standard bewährt:

https://datatables.net

Nicht benötigte Features können problemlos weg konfiguriert werden. Aber die Suchfunktion kann u. U. auch ganz nützlich sein.

[xyladecor]

Vielen Dank für eure so schnelle Hilfe! Schaue ich mir an, mal sehen ob ich es hinbekomme.

[daniel5959]

Hallo,

das Beispiel von Werner Zenk konnte ich leicht in eine HTML-Datei einbauen und die Spalten erweitern, siehe

>> http://findelinks.de/177-sortierte-tabelle.html (Meine einfache Testseite)

Bei Datatables bin ich am Beispiel gescheitert, irgendetwas hat gefehlt oder war falsch, nur ein kurzes Wirrwar zu sehen.

Vielleicht kann der "Experte" Sempervivum mal ein einfaches, gekürztes Beispiel als HTML-Datei zur Verfügung stellen.

daniel5959

[daniel5959]

Nachtrag:

Ich warte immer noch, dass der "Experte" eine praktikable Lösung für Datatables anbietet und nicht nur verlinkt.

[Testie]

Du wartest immer noch? Bist du in der Position soetwas hier zu fordern? Finde ich schon etwas skurril.

Ich benutzt vue.js. Hier ein Beispiel: https://vuetifyjs.com/en/components/...ables/sorting/

[daniel5959]

Hallo,

@Testie: wenn jemand meinen CSS-Code vor einiger Zeit, den ich als Laie mühsam zusammensuchen und testen musste, damit es überhaupt funktioniert2, da die vielen Experten-Websites zwar reichlich Code-Beispiele liefern, aber immer etwas weglassen, als "überholt" bezeichnet, wie soll ich das bezeichnen?

Der gepostete Link hier zu vuetify.com liefert keine für Laien nachvollziehbaren Beispiele, die man in seine Html-Seite einbauen könnte - jedenfalls konnte ich keinen Beispiel-Code finden. Es besteht also hier die Chance den Laien mal zu zeigen wie man den Code erfolgreich einbauen kann - ich habe den Beweis schon erbracht.

Ich hatte erwartet, dass das Forenmitglied Sempervivum auch mal einen kleinen funktionierenden Beispiel-Code bereitstellt.

daniel5959

[Testie]

Und genau da liegt das Problem. Experten haben auch Zeit investiert um das alles zu können und zu verstehen. Hier soll das erlernte Wissen dann kostenlos weitergeben werden, am besten noch eine Schritt für Schritt Anleitung. Klar könnte ich jetzt auch hier ein Beispiel mit html css und js erarbeiten und hier posten. Aber möchte ich das? Bei dem link ist alles beschrieben, zudem könnte man sich auch einfach mal mit vuejs oder sonstwas beschäftigen. Aber das würde ja viel zu weit gehen und viel zu viel Zeit in Anspruch nehmen… ach wirklich?? Es wird mit einen gewissen Umgangston hier vorausgesetzt das es ein fertiges Beispiel bekommt. Dann wird wahrscheinlich noch gefragt wie man es einbinden kann…

du bist auch sehr lange hier dabei, aber Weiterbildung in dem Bereich sehe ich auch bei dir leider nicht. Schade.

[daniel5959]

Hallo,

damals bei den Tabellen-Layout hatte ich keine Probleme die Grafik mit dem Webseitendesign in Einzelteile zu zerlegen und in einer Tabelle zu einem Webseiten-Layout zusammenzusetzen, aber mit CSS bin ich nie warm geworden, also habe ich es gelassen und mich nur auf kleinere Korrekturen bei CSS-Code beschränkt.

Mit PHP habe ich angefangen und etwas über ein Jahr lang in einem anderen Forum die Script der Scriptschreiber um die eine und andere Funktion erweitert oder Fehler in den PHP-Scripten behoben, aber dann wollte der Kopf nicht mehr mitmachen und hat mit Schwindel reagiert, also war das Thema PHP damit erledigt.

DIe SQL-Datenbanksprache habe ich erst garnicht angefangen und mich bei Javascript auf kleine Änderungen bei einfachen Javascripts beschränkt.

Kurz gesagt - ich habe mich nicht damit abgequält, um ein Experte zu werden, mir genügte es Templates mit Inhalten zu füllen.

Und heute nehme ich ein PC-Programm, da mir die Templates und verschiedene Objekte (Text, Bild, Video, Kontaktformular, Blog, Shop usw.) mitliefert, die ich nur noch in ein Raster setzen und mit Inhalten füllen muss - d.h. ich lerne nicht Autobau und baue das Auto selbst, wenn ich fahren will.

daniel5959

[Sempervivum]

Da der Fragesteller noch keine Rückmeldung gegeben hat, ob er mit einem der drei Vorschläge zum Ziel gekommen ist, bestand für mich keine Veranlassung für ein neues Posting. Sollte er Probleme mit der Umsetzung haben, werde ich gern darauf eingehen.

[xyladecor]

Ich muss gestehen ich kämpfe mit fundamentalen Wissens/Verständnislücken, wollte aber nicht gleich mit "ich krieg´s nicht hin" hier losjammern sondern erstmal rumprobieren um vlt. mit try & fail weiterzukommen, deshalb war es die letzten 2, 3 Tag ruhig von mir.

Mit dem werner-zenk.de link kam ich überhaupt nicht zu recht, da fehlt mir ja schon als Laie die normal doch übiche (?) .js Datei, oder?

Ich habe es dann mit dieser Seite versucht https://www.j-berkemeier.de/TableSort.html#hd bin einen kleinen Schritt weitergekommen, das sieht dann so aus, also für die Profis hier wahrscheinlich lächerlich.

Das Ergebnis sieht um bei meinen ursprünglichen Mustertabellebeispiel zu bleiben gar nicht schlecht aus, also aus meiner Sicht. Eigentlich werden alle Spalten entsprechend sortiert wi eman will. Nur bie der Datumsspalte dürfte es nicht so recht passen, fängt zwar richtig an, aber soertiert dann mitten drin nicht mehr konstant weiter, sicher von mir ein Fehler. Bislang bin ich noch nicht draufgekommen was da beim der Spalte mit Datum schief läuft.

https://bonustrack.lima-city.de/TableSort.htm

Ich will betonen, dass mir die Hilfe von allen hier schon um einiges weiter geholfen hat. Noch vor dem Erstellen dieses threads hatte ich nicht den Hauch einer Idee das hinzubekommen, nur den Wunsch, durch die Hinweise bin ich schon mal so weit wie oben gekommen. Danke dafür!

[Sempervivum]

Wie ich sehe, hast Du die Struktur der Tabelle schon bereinigt, so dass jetzt head und body drin sind, das ist schon Mal sehr positiv.
J.Berkemeier hat verschiedene Formate von Datum und Uhrzeit bereits berücksichtigt und soweit ich sehe, funktioniert das Sortieren der Spalte mit dem Datum auch im wesentlichen. Es funktioniert jedoch nur wenn das Datum präzise in der Form dd.mm.yyyy angegeben wird. In deiner Tabelle sehe ich jedoch einen Eintrag, der so aussieht:

08.-11.03.04

Damit kann das Sortieren nicht funktionieren. Lösung z. B. indem Du nur das Startdatum angibst und in einer anderen Spalte einen Hinweis auf die Dauer oder das Enddatum.
Ich sehe da auch Hilfseinträge der Form "1635379200000", wahrscheinlich die Sekunden seit 1970. Normaler Weise müssten die unsichtbar sein, aber da bin ich jetzt nicht eingestiegen, da schon spät.

[xyladecor]

Diese eine Zeile mit "08.-11.03.04" in der Datumsspalte habe ich korrigiert, ich dachte vlt. bringt die alles durcheinander. Dem ist aber leider nicht so. Es wird korrekt begonnen nach Datum zu reihen, mitten drin verliert das ganze aber den Faden. Sowohl abei aufsteigender, wie absteigener Zählweise.

Ich denke das kann nur am Script selbst liegen, denn ich wüsste nicht was ich jetzt anders machen könnte, sehr seltsam.

[Sempervivum]

OK, offenbar gibt es noch ein anderes Problem. Das Datum wird mit diesem Code ausgewertet:

if(!tval.search(/^\s*\d+\s*\.\s*\d+\s*\.\s*\d+/)) { // dd. mm. yyyy
dmy = tval.split(".");
for(let i=0;i<3;i++) dmy[i] = parseInt(dmy[i],10);
dmy = trmdat(dmy);
if(debugmodus) console.log(val+": dd. mm. yyyy")
msec = Date.parse(dmy[2]+"-"+dmy[1]+"-"+dmy[0]);
if(!isNaN(msec)) return msec;
}
​

Der Kern dabei ist diese Zeile:

msec = Date.parse(dmy[2]+"-"+dmy[1]+"-"+dmy[0]);

Das Date.parse prüft, ob das Datum gültig ist. Du hast da jedoch diverse Einträge drin, wo als Tag "00" steht, das ergibt kein gültiges Datum und der Rückgabewert der Funktion ist undefiniert. Um dafür eine Lösung zu finden, müsste man zunächst wissen, was ein solcher Eintrag bedeuten soll. Ist dann der ganze Monat gemeint, oder ...?