Einbinden mehrerer Tabellen in einer Seite, Anwendung iframe und Tablesorter

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
Koba
Posts: 6
Joined: Fri Dec 22, 2017 12:23 pm

Einbinden mehrerer Tabellen in einer Seite, Anwendung iframe und Tablesorter

Post by Koba » Fri Dec 22, 2017 1:28 pm

Hallo Zusammen,

ich habe folgendes vor:

Auf einer im CMSimple angelegten Seite "Mitglieder" soll eine Mitgliederliste in Tabellenform angezeigt werden. Als Grundlage dient eine csv-Datei (Mitglieder1.csv), die regelmäßig aktualisiert wird.
Eingebunden habe ich die Tabelle über
{{{PLUGIN:csv_as_table('PFAD_ZUR_DATEI');}}}
, wie in viewtopic.php?f=16&t=4174&p=24921&hilit ... ble#p24921 beschrieben. Klappt alles hervorragend!
In der userfunc.php habe ich der Tabelle noch die Klasse "Tablesorter" zugewiesen

Code: Select all

table class="tablesorter"
. Das Plugin Tablesorter-XH ist installiert.
Die Sortierung der Tabelle funktioniert auch wie gewünscht.
Es sollen aber zwei weitere Tabellen eingebunden werden (Ehrenmitglieder.csv und Jubilare.csv). Funktioniert auch, aber leider nicht mehr sortierbar -die Einschränkung ist ja bekannt.

Jetzt mein Problem oder meine Frage:
Ich würde die beiden Tabellen auf zwei "unsichtbaren" Seiten im CMSimple-Baum sortierbar anlegen und via z.B. iframe auf der Seite Mitglieder einbinden wollen.
Das klappt aber irgendwie nicht. Wenn ich die Seite über iframe einbinde

Code: Select all

<iframe src="./?Ehrenmitglieder" width="300" height="150"></iframe>
bekomme ich die Meldung "Dieser Inhalt kann nicht in einem Frame angezeigt werden". Gibt es andere Möglichkeiten oder muss ich tatsächlich den Weg gehen und für jede Tabelle eine einzelne Seite erstellen?

Danke für Eure Hilfe.

Koba

Koba
Posts: 6
Joined: Fri Dec 22, 2017 12:23 pm

Re: Einbinden mehrerer Tabellen in einer Seite, Anwendung iframe und Tablesorter

Post by Koba » Fri Dec 22, 2017 2:38 pm

Ok, ich habe da mal

Code: Select all

{{{geturl('http://.../?Ehrenmitglieder&print');}}}
noch ausprobiert. Ohne Print ist es wohl nicht möglich, nur den Content auszulesen?
Leider ist allerdings auch hier die Tabelle nicht sortierbar. Muss mir wohl doch was anderes einfallen lassen. :?

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Einbinden mehrerer Tabellen in einer Seite, Anwendung iframe und Tablesorter

Post by cmb » Fri Dec 22, 2017 4:46 pm

Koba wrote:Das klappt aber irgendwie nicht. Wenn ich die Seite über iframe einbinde

Code: Select all

<iframe src="./?Ehrenmitglieder" width="300" height="150"></iframe>
bekomme ich die Meldung "Dieser Inhalt kann nicht in einem Frame angezeigt werden".
Hast du in der Konfiguration bei Security → Frame Options eventuell DENY eingestellt? Dann können die CMSimple_XH Seiten nämlich nicht in IFrames dargestellt werden – ansonsten sollte das funktionieren. Also ggf. zu SAMEORIGIN ändern.
Koba wrote:Ohne Print ist es wohl nicht möglich, nur den Content auszulesen?
Ohne &print wird immer die komplette Seite geliefert (inclusive Menü, Newsboxen etc.) &print liefert nur den Content-Bereich. Man könnte aber auch ein seitenspezifisches Template nutzen, dass eben genau das enthält, was man will. Das bietet sich i.d.R. aber nur bei versteckten Seiten an.
Koba wrote:Es sollen aber zwei weitere Tabellen eingebunden werden (Ehrenmitglieder.csv und Jubilare.csv). Funktioniert auch, aber leider nicht mehr sortierbar -die Einschränkung ist ja bekannt.
Bekannt und dokumentiert ist diese Einschränkung schon – aber eigentlich ziemlich bescheuert. Kurzfristig kann ich allerdings leider nicht nachbessern.
Christoph M. Becker – Plugins for CMSimple_XH

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Einbinden mehrerer Tabellen in einer Seite, Anwendung iframe und Tablesorter

Post by lck » Fri Dec 22, 2017 8:44 pm

cmb wrote:Ohne &print wird immer die komplette Seite geliefert (inclusive Menü, Newsboxen etc.) &print liefert nur den Content-Bereich. Man könnte aber auch ein seitenspezifisches Template nutzen, dass eben genau das enthält, was man will. Das bietet sich i.d.R. aber nur bei versteckten Seiten an.
Koba wrote:Leider ist allerdings auch hier die Tabelle nicht sortierbar. Muss mir wohl doch was anderes einfallen lassen.
Und als Newsbox in die Seite einbinden, funktioniert dann die Sortierung?
Einbinden kann man es so (News01 kann natürlich auch anders benannt werden, also auch Ehrenmitglieder):

Code: Select all

{{{newsbox('News01');}}}>
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Einbinden mehrerer Tabellen in einer Seite, Anwendung iframe und Tablesorter

Post by cmb » Fri Dec 22, 2017 9:10 pm

lck wrote:Und als Newsbox in die Seite einbinden, funktioniert dann die Sortierung?
Nein, weil Selectoren wie `.tablesorter tr` verwendet werden. Gibt es mehrere .tablesorter-Tabellen auf der gleichen Seite (meint, im gleichen Dokument), dann dürfte Chaos entstehen.
Christoph M. Becker – Plugins for CMSimple_XH

Koba
Posts: 6
Joined: Fri Dec 22, 2017 12:23 pm

Re: Einbinden mehrerer Tabellen in einer Seite, Anwendung iframe und Tablesorter

Post by Koba » Mon Jan 22, 2018 7:56 pm

Vielen Dank für eure Ratschläge. Ich habe letztlich eine Tabelle direkt auf der betreffenden Seite eingebunden, eine weitere auf einer nicht direkt sichtbaren Unterseite. Diese habe ich über iframe eingebunden.
Das funktioniert in meinen Augen ganz gut.

Aber über ein Problem bin ich dann doch noch gestoßen. Ich glaube aber nach meinen Recherchen im Netz, dass dies gar nicht so einfach lösbar ist.

Die Tabellendaten liegen ja als csv-Datei vor, welche über den Pluginaufruf csv-as-table als Tabelle dargestellt wird. Mit dem Tablesorter kann der Besucher sich seine Sortierpreferenzen selbst aussuchen. Mein aktuelles Problem: Die csv-Datei wird so als Tabelle ausgegeben, wie sie ist - von Grund auf alphabetisch sortiert.
Aber ich schreibe nun neue Datensätze per Script in die Datei, die werden folglich hinten angehängt. Die alphabetische Sortierung ist also zunächst nicht mehr gegeben.
Ist es möglich, die Tabelle immer von Beginn an automatisch alphabetisch sortieren zu lassen, ohne dem Benutzer die Möglichkeit zu nehmen, selbst anders zu sortieren?
Zur Verdeutlichung die testweise veröffentlichte Website: http://mgz.rantr.de/?Mitglieder . Bei der zweiten kürzeren Tabelle ist dies recht übersichtlich zu sehen.

Danke im Voraus wiedereinmal für eure Hilfe.

Koba

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Einbinden mehrerer Tabellen in einer Seite, Anwendung iframe und Tablesorter

Post by cmb » Mon Jan 22, 2018 10:07 pm

Koba wrote:
Mon Jan 22, 2018 7:56 pm
Die Tabellendaten liegen ja als csv-Datei vor, welche über den Pluginaufruf csv-as-table als Tabelle dargestellt wird. Mit dem Tablesorter kann der Besucher sich seine Sortierpreferenzen selbst aussuchen. Mein aktuelles Problem: Die csv-Datei wird so als Tabelle ausgegeben, wie sie ist - von Grund auf alphabetisch sortiert.
Aber ich schreibe nun neue Datensätze per Script in die Datei, die werden folglich hinten angehängt. Die alphabetische Sortierung ist also zunächst nicht mehr gegeben.
Ist es möglich, die Tabelle immer von Beginn an automatisch alphabetisch sortieren zu lassen, ohne dem Benutzer die Möglichkeit zu nehmen, selbst anders zu sortieren?
Zur Verdeutlichung die testweise veröffentlichte Website: http://mgz.rantr.de/?Mitglieder . Bei der zweiten kürzeren Tabelle ist dies recht übersichtlich zu sehen.
Eigentlich ganz einfach, wenn alle Tabellen nach der selben Spalte(nnummer) sortiert werden sollen (im Beispiel Spalte 3):

Code: Select all

Array.prototype.forEach.call(document.querySelectorAll(".tablesorter th:nth-child(3) button"), function (button) {button.click();});
Das klappt prima, wenn man es in der Browserkonsole eingibt. Wenn man es allerdings automatisiert ausführen will, kann man es aber nicht einfach beim Laden des Fensters (window.onload) triggern, weil dann die Tabelle u.U. noch gar nicht fertig initialisiert ist. Also den Code am besten vor dieser Zeile einfügen.

Kniffliger wird es, wenn die Tabellen nach unterschiedlichen Spalte(nnummern) sortiert werden sollen, weil man mit CSS wohl nicht nach Content selektieren kann. Da könnte man aber der gewünschten Spalte (also dem <th>) manuell eine Klasse zuweisen (beispielsweise .presort), und dann den Code entsprechend ändern:

Code: Select all

Array.prototype.forEach.call(document.querySelectorAll(".tablesorter th.presort button"), function (button) {button.click();});
Christoph M. Becker – Plugins for CMSimple_XH

Koba
Posts: 6
Joined: Fri Dec 22, 2017 12:23 pm

Re: Einbinden mehrerer Tabellen in einer Seite, Anwendung iframe und Tablesorter

Post by Koba » Thu Jan 25, 2018 1:14 pm

Super, das klappt perfekt! :)

Ich habe mich für deinen erste aufgezeigte Codevariante entschieden, da (für mich) einfacher umsetzbar. Ist trotzdem kompliziert genug, da da hinter zu steigen ;)
Aus diesem Grund extra nochmal vielen Dank generell für dieses Forum und eure engagierte Hilfe! :D

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Einbinden mehrerer Tabellen in einer Seite, Anwendung iframe und Tablesorter

Post by cmb » Thu Jan 25, 2018 2:19 pm

Koba wrote:
Thu Jan 25, 2018 1:14 pm
Ist trotzdem kompliziert genug, da da hinter zu steigen ;)
Der Code lässt sich auch anders schreiben:

Code: Select all

var buttons = document.querySelectorAll(".tablesorter th:nth-child(3) button");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].click();
}
In der ersten Zeile werden die gewünschten Buttons selektiert (der Ausdruck in Anführungszeichen ist ein normaler CSS-Selektor). Danach werden die gefundenen Buttons durchlaufen, und für jeden dessen .click() Methode aufgerufen, die einen Benutzerklick simuliert.
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply