Tablesorter_XH

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Tablesorter_XH

Post by cmb » Thu Mar 16, 2017 10:12 am

Hallo zusammen!

Ich habe gerade Tablesorter_XH 1.0beta1 veröffentlicht.

Trotz des Namens (der historisch begründet ist, weil das Plugin ursprünglich nur das Sortieren von Tabellen ermöglichen sollte), unterstützt das Plugin weitere Verbesserungen:
Tablesorter_XH ermöglicht die halbautomatische Verbesserung von Tabellen in Browsern, die einigermaßen zeitgemäßes JavaScript unterstützen. Sortieren nach einzelnen Spalten in auf- und absteigender Reihenfolge, verstecken vordefinierter Spalten, die erweitert werden können, sowie Paginierung sind möglich.
Es gibt immer noch viel zu tun (und beinahe sicher eine Menge mehr), so dass ich mich auf Euer Feedback freue!

Danke!
Christoph M. Becker – Plugins for CMSimple_XH

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

Re: Tablesorter_XH

Post by lck » Fri Mar 17, 2017 5:53 pm

Sehr schön, danke!
Hilfedatei - wrote:Um eine Spalte als versteckt zu markieren, muss das entsprechende <th> die CSS-Klasse tablesorter_hide erhalten. Alternativ können auch die CSS-Klassen tablesorter_x_small, tablesorter_small, tablesorter_medium oder tablesorter_large verwendet werden, um die Spalte in unpassenden Viewports auszublenden.
Kritikpunkt: Das Verstecken und wieder einblenden passiert leider erst nach einem Neuladen der Seite. Bei mobilen Geräten evtl. ein Problem, wenn man von Landscape zu Portrait-Ansicht und zurück wechselt :?
„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: Tablesorter_XH

Post by cmb » Fri Mar 17, 2017 6:53 pm

lck wrote:Kritikpunkt: Das Verstecken und wieder einblenden passiert leider erst nach einem Neuladen der Seite. Bei mobilen Geräten evtl. ein Problem, wenn man von Landscape zu Portrait-Ansicht und zurück wechselt :?
Nein, nicht "eventuell" ein Problem, sondern auf jeden Fall eines! Werde ich auch spätestens bis zum RC beheben.

Da Du Dir das Plugin schon mal angeschaut hast: hast Du einen Tipp bzgl. des Button-Styling? Kann man nicht eine kleine Hintergrundgrafik auf einem Button platzieren, ohne dass dieser gleich furchtbar klobig aussieht (vergleiche Sortier- und Aufklappbuttons vs. Paginierungsbuttons)? Ich hab diverses ausprobiert, aber sobald background-image im Spiel ist, scheint "alles futsch". :cry:
Christoph M. Becker – Plugins for CMSimple_XH

mhz
Posts: 676
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

Re: Tablesorter_XH

Post by mhz » Sat Mar 18, 2017 9:15 am

Ich hatte nicht mitbekommen, dass es einen neuen Threat hierzu gibt ...

Aus den PN herausgenommen und nun hierher verschoben:
Hallo Christoph,
entweder ich mache etwas falsch, oder es gibt ein Problem.
Was ich etwas schade finde ist, dass die <th>s, die über hide ausblende, dann komplett aus der <th>-Liste verschwinden und genau hinter <div class="tablesorter" eingefügt.
Außerdem wird der <thead>-Block immer wieder in eine/mehrere Zeilen zusammengeschoben, was eine spätere Bearbeitung nicht besonders erleichtert.

Nach Eingabe der entsprechenden classes kam das beim 1. Testen heraus:
https://test.hhs-obertshausen.de/?BiB-Seminar-1
Die Knöpfe zum Ein-/Ausschalten fehlen nun auch.
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

mhz
Posts: 676
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

Re: Tablesorter_XH

Post by mhz » Sat Mar 18, 2017 9:18 am

cmb antwortete:
Danke für den Link!

Ich sehe, dass die Dokumentation des Plugins noch verbesserungsfähig ist. :)

Zunächst einmal kann Tablesorter_XH nicht wirklich mit rowspan und colspan umgehen. Daher müsstest Du die erste Spalte aus der Tabelle nehmen, und vielleicht als Überschrift über der Tabelle platzieren. Vermutlich brauchst Du insgesamt noch weitere Klassenstufen; die könnten aber einfach jeweils auch in einer eigenen Tabelle untergebracht werden (mehrere Tabellen werden noch nicht vom Plugin unterstützt; das kommt aber noch).

Dann erwartet das Plugin die CSS-Klasse tablesorter beim <table> Element, nicht bei einem übergeordneten <div>. Und die grundsätzliche Struktur der Tabelle muss stimmen: jede Zeile (auch die Überschriften) muss gleich viele Zellen haben (bei Dir gibt es nur 4 Überschriftszellen, aber 7 Inhaltszellen pro Zeile).

Und dann sollten natürlich einige Spalten ausgeblendet werden, ggf. abhängig von der Fenstergröße des Browsers. Dazu muss den jeweiligen <th>s die gewünschte CSS-Klasse zugewiesen werden.

Ich habe mir den Quellcode der Tabelle mal herauskopiert, und entsprechend überarbeitet:

Code: Select all

{{{tablesorter}}}
<div>Ressourcen / MaterialienBezug zum BO-Konzept der SchuleInnerschulische Verantwortlichkeiten
<table class="tablesorter" style="border-color: #000000; border-width: 1px; border-style: solid;" border="1" align="left">
<thead>
<tr>
    <th style="text-align: center; background-color: #d6d6d6;">BO-Maßnahme</th>
    <th class="tablesorter_medium" style="text-align: center; background-color: #d6d6d6;">Wichtigste Zielsetzungen</th>
    <th class="tablesorter_large" style="text-align: center; background-color: #d6d6d6;">Außerschulische Kooperationen</th>
    <th class="tablesorter_hide"></th>
    <th class="tablesorter_hide"></th>
    <th class="tablesorter_hide"></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;" valign="top">Besuch der BiB an der HHS</td>
<td style="text-align: left;"> </td>
<td style="text-align: left;"> </td>
<td style="text-align: left;" valign="top">
<p style="text-align: left;">OloV-Haupt-Qualitätsstandard: Individuelle Förderung der Ausbildungsreife <strong>und</strong> überfachliche Kompetenzen lt. §2:Kommunikationsfähigkeit, Durchhaltevermögen, Fähigkeit zur Selbstorganisation, Höflichkeit, Zuverlässigkeit</p>
</td>
<td style="text-align: left;"> </td>
<td style="text-align: left;" valign="top">
<p>Ansässige und teilnehmende Wirtschaftsunternehmen und Institutionen</p>
</td>
</tr>
<tr>
<td style="text-align: left;" valign="top">
<p><strong>1. Vorbereitung<br></strong>• Elternbrief<br>• Kooperation bei Planung und Durchführung (BiB-Arbeitsgruppe)<br>• Inhaltliche Vorbereitung im AL-Unterricht<br>• Vorbereitung der Berufsrally</p>
</td>
<td style="text-align: left;" valign="top">
<p>• Sensibilisierung der SuS für die Wichtigkeit der BiB<br>• Vorstellung der hiesigen Wirtschaft und Institutionen</p>
</td>
<td style="text-align: left;" valign="top">
<p>• Klassenspezifischer Laufbogen (Erstellung)<br>• Elternbrief<br>• Übersicht der ausstellenden Betriebe mit Berufen und Institutionen mit Abschlüssen</p>
</td>
<td style="text-align: left;" valign="top">
<p>• Erlass zur Ausgestaltung der Berufs- und Studienorientierung in Schulen (§§ 18-23)</p>
</td>
<td style="text-align: left;" valign="top">
<p>• Klassenlehrer/in<br>• AL-Lehrer/in</p>
• Inklusionslehrer/in</td>
<td style="text-align: left;" valign="top"> </td>
</tr>
<tr>
<td style="text-align: left;" valign="top">
<p><strong>2. Durchführung<br></strong>• Klassen besuchen die Ausstellungsstände der teilnehmenden Betriebe und Institutionen und setzen Berufsrally ein</p>
</td>
<td style="text-align: left;" valign="top">
<p>• Kontaktaufnahme und direkter Kontakt zu den Wirtschaftsbetrieben und Institutionen<br>• Sichtung der vorhandenen Praktikums- und Ausbildungsmöglichkeiten vor Ort</p>
</td>
<td style="text-align: left;" valign="top">
<p>• Berufsrally</p>
</td>
<td style="text-align: left;"> </td>
<td style="text-align: left;" valign="top">
<p>• Klassenlehrer/in<br>• AL-Lehrer/in</p>
• Inklusionslehrer/in</td>
<td style="text-align: left;" valign="top"> </td>
</tr>
<tr>
<td style="text-align: left;" valign="top">
<p><strong>3. Nachbereitung<br></strong>• Auswertung der Berufsrally im jeweiligen Unterricht<br>• Abschließendes Unterrichtsgespräch</p>
</td>
<td style="text-align: left;" valign="top">
<p>• Berufsbilder den Wirtschaftssektoren zuordnen<br>• SuS setzen sich mit ihren eigenen Lebens- und Berufszielen auseinander.<br>• (Evaluierung der individuellen Ergebnisse bezüglich der Zielsetzungen)</p>
</td>
<td style="text-align: left;" valign="top">
<p>• Auswertung der Berufsrally</p>
</td>
<td style="text-align: left;"> </td>
<td style="text-align: left;" valign="top">
<p>• (Klassenlehrer/in)<br>• AL-Lehrer/in</p>
• Inklusionslehrer/in</td>
<td style="text-align: left;"> </td>
</tr>
</tbody>
</table>
</div> 
Das kannst Du auf einer neuen Testseite in der HTML-Ansicht einfach mal eingeben (dabei die Seitenüberschrift aber nicht löschen).

Ach ja: bei dieser Tabelle ist das Sortieren wohl nicht sinnvoll. Daher solltest Du in der Plugin-Konfiguration "Sortable" deaktivieren.
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

mhz
Posts: 676
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

Re: Tablesorter_XH

Post by mhz » Sat Mar 18, 2017 9:19 am

Hallo Christoph,
erste schnelle Antwort:
jede Zeile (auch die Überschriften) muss gleich viele Zellen haben (bei Dir gibt es nur 4 Überschriftszellen, aber 7 Inhaltszellen pro Zeile)
Die waren gleich! Aber nachdem ich tablesorter_hide eigegeben hatte und den Refresh F5 gemacht hatte, waren sie nicht mehr da bzw an den anderen Platz verschoben.
Und deshalb sieht es so komisch aus.
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

mhz
Posts: 676
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

Re: Tablesorter_XH

Post by mhz » Sat Mar 18, 2017 9:40 am

Ich habe dieses interessante Verhalten versucht zu replizieren. Es hat nicht ganz geklappt!
[ external image ]
So sieht es vor der Aktualisierung, Speichern und F5-Refresh aus.
Danach seht ihr das Ergebnis: [ external image ]
Im HTML-Code ist die class="tablesorter" nicht mehr da, thead ist auch weg, stattdessen ist jetzt tbody, zwei Überschriften sind zusammengeschoben und eine fehlt entsprechend hinten. (Vorher waren es sogar 3. Aber diese waren wenigstens anklickbar.)
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

mhz
Posts: 676
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

Re: Tablesorter_XH

Post by mhz » Sat Mar 18, 2017 9:47 am

5. Antwort hier:
Das kannst Du auf einer neuen Testseite in der HTML-Ansicht einfach mal eingeben
Habe ich gemacht; so sieht es jetzt aus: https://test.hhs-obertshausen.de/?Bib-Seminar-1b
Die ausgeblendeten Spalten werden so eingeblendet, dass man leider nicht erkennt, wozu sie gehören.
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

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

Re: Tablesorter_XH

Post by cmb » Sat Mar 18, 2017 10:32 am

mhz wrote:Die waren gleich! Aber nachdem ich tablesorter_hide eigegeben hatte und den Refresh F5 gemacht hatte, waren sie nicht mehr da bzw an den anderen Platz verschoben.
Und deshalb sieht es so komisch aus.
Welchen Editor verwendest Du? Ich habe bisher nur mit dem Standard-TinyMCE 3 getestet, und da wurde die HTML-Struktur mit allen relevanten CSS-Klassen erhalten. Es könnte aber sein, dass andere Editoren oder eine andere Konfiguration des TinyMCE 3 da selbstständig "bereinigt" ~ dem könnte dann aber wohl abgeholfen werden.

Es kann aber auch sein, dass sich Fehler im HTML-Quellcode eingeschlichen haben. Die würde der Editor vor dem Speichern versuchen zu korrigieren, und das Ergebnis könnte unerwünscht sein.

Auf jeden Fall ist es zumindest mit dem TinyMCE 3 möglich, das nötige HTML-Markup inkl. der CSS-Klassen auch vollständig in der WYSIWYG-Ansicht zu erzeugen. Im Dialog "Tabelle einfügen/bearbeiten" kann die CSS-Klasse vergeben werden, wenn man in der Dropdownliste zunächst ganz unten "(Wert)" auswählt, und dann einfach "tablesorter" eingibt. Die Spaltenüberschriften können per Kontextmenü→Zelle→Eigenschaften der Zelle "korrigiert" werden. Im entsprechenden Dialog kann rechts oben der Zellentyp als Überschrift gewählt werden, und die CSS-Klasse analog zum "Tabelle einfügen/bearbeiten" Dialog eingegeben werden.
mhz wrote:5. Antwort hier:
Das kannst Du auf einer neuen Testseite in der HTML-Ansicht einfach mal eingeben
Habe ich gemacht; so sieht es jetzt aus: https://test.hhs-obertshausen.de/?Bib-Seminar-1b
Die ausgeblendeten Spalten werden so eingeblendet, dass man leider nicht erkennt, wozu sie gehören.
Das liegt wohl daran, dass die letzten drei Spalten keine Überschrift haben. Es nicht nämlich so, dass das Plugin aus allen aktuell unsichtbaren Spalten eine <dl> erstellt, wobei die Spaltenüberschriften <dt>s und die Zelleninhalte <dd>s werden. Sind die Spaltenüberschriften leer, dann sieht man quasi nur noch eine einfache Liste.
Christoph M. Becker – Plugins for CMSimple_XH

mhz
Posts: 676
Joined: Tue Jun 25, 2013 8:46 pm
Location: Heusenstamm, Hessen
Contact:

Re: Tablesorter_XH

Post by mhz » Sat Mar 18, 2017 10:34 am

Jetzt habe ich noch die durchgängige Spalte Klassenstufe entfernt (damit die Tabellenbreite verkürzt wird) und als reinen Hinweistext über der Tabelle platziert.
Außerdem passte ich Christophs Code entsprechend an, denn die (durch einnen Fehler) ausgeblendeten "Ressourcen / Materialien", "Bezug zum BO-Konzept der Schule" und "Innerschulische Verantwortlichkeiten" sollen natürlich anklickbar bleiben.
Aber da stimmt nun wieder irgendetwas nicht, denn nun ist ein "mehr"-Button zu genau diesen ausgeblendeten Spalten in der 3. Spalte und nicht in der 4. Außerdem werden sie alle 3 nun komplett für die 1. Zeile bzw ab da richtig in der 4. Spalte für die 2. Zeile usw angezeigt.
Das Ergebnis seht ihr hier: https://test.hhs-obertshausen.de/?BiB-Seminar-1-c
Michael Zajusch (mhz)-- Mein Tutorial für CMSimple_XH. Früher

Post Reply