Eigene interaktive Tabelle mit paragraph_table.ccml und JQuery erstellen

[harlekin8]

Hallo allerseits,

für einen Freund erstelle ich eine neue Seite, mit dem als Basis dienende Carbon-Design. Die interaktive Tabelle von W2D/S2D ist ja verbugt ... also biete ich euch eine allg. Lösung an, wie Ihr anhand des Standard-Absatz "Tabelle" eine interaktive Tabelle basteln könnt. Alle Vorteile des Tabellen-Absatzes bleiben erhalten, auch die Schattenkopien funktionieren mit dieser Lösung. Falls Ihr diese Möglichkeit nutzen wollt, stelle ich die gerne frei zur Verfügung.

Ach, ja bevor ihr die Dateien ändert, immer die Originaldatei sichern !!

Zum Einsatz kommt das JQuery Plugin Tablesorter 2.0 und die paragraph_ccml, sowie die navigation.ccml und global.ccml aus dem entsprechenden Design-Ordner (hier Carbon).

Der Tablesorter benötigt folgende Voraussetzung: <thead>- und <tbody>-Tags, also gilt es diese zu erfüllen: so sieht die überarbeitete paragraph_table.ccml aus: zum besseren Verständnis habe ich es mit vielen Kommentare versehen

<cc:*>
 ---------------------------------------------------------
Web2Date

Layout: Carbon --> Arowa
Autor: Thomas Henrichs --> Ingo Gerhardt
Datei: paragraph_table.ccml
Funktion: Bild in Tabellenabsatz
Modifiziert: 10.08.2011
für JQuery-Framework "Tablesorter"
Modifikation: <thead>- und <tbody>-Tags werden eingefügt,
neue Klassen deklariert. 
---------------------------------------------------------
</cc:*>

<cc:*>
--------------------------------------------------------------
// Damit Schattenkopien auch funktionieren id="myTable" //
// als Klasse definieren //
-------------------------------------------------------------- 
</cc:*>
<cc:loop type="row" obj="myrow">
  <cc:if cond="&myrow.header">
    <cc:set obj="Ueberschrift" value="1">
  </cc:if>
</cc:loop>

<cc:if cond="&Ueberschrift = 1">
<table class="myTable tablesorter" width="100%">
<cc:else>
<table id="tabledefault" class="cells" width="100%">
</cc:if>

<cc:loop type="row" obj="myrow">

<cc:*>
--------------------------------------------------------------
// Überprüfen ob Tabelle Spaltenüberschrift besitzt; //
// Falls ja, <thead>-, <tr>- und <th>-Tag für erste Zeile //
// ausgeben, falls nein nur <tr>-Tag für alle Zeilen //
// ausgeben (Default-Einstellung in paragraph_table.ccml). //
--------------------------------------------------------------
</cc:*>

<cc:if cond="&myrow.header">
<thead>
<tr>
<cc:else>
<tr> 
</cc:if>

<cc:*>
-----------------------------------------------------------------
</cc:*>

<cc:loop type="col" obj="mycol" row="&myrow.number">
<cc:if cond="&myrow.header">

<cc:*>
-------------------------------------------------------------------------
// <td> durch <th> ersetzen sonst greift der entsp. Javascript nicht //
-------------------------------------------------------------------------
</cc:*>
<th width="<cc:print value="&mycol.width">%"  class="tablesorter" align="<cc:print value="&mycol.align">"  valign="top">
<cc:else>
<cc:if cond="&Ueberschrift = 1">
<td width="<cc:print value="&mycol.width">%"  class="headercell" align="<cc:print value="&mycol.align">"  valign="top">
<cc:else>
<td width="<cc:print value="&mycol.width">%" class="cell"  align="<cc:print value="&mycol.align">" valign="top">
</cc:if>
</cc:if>
<cc:if cond="&mycol.picture">
<cc:picture uid="&mycol.picture" obj="tablepic"  width="&plugin.width * &mycol.width / 100 - 12"  suffix="'table'+&mycol.width">

<cc:if cond="&mycol.picture.zoom.isonsite">
<a href="<cc:print  value="&mycol.picture.zoom.url">"><cc:printpicture  xhtml="1" obj="tablepic" suffix="'table'+&mycol.width"></a>
</cc:if>

<cc:if cond="&mycol.picture.zoom.isoffsite">
<a href="<cc:print value="&mycol.picture.zoom.url">"  target="_blank"><cc:printpicture xhtml="1" obj="tablepic"  suffix="'table'+&mycol.width"></a>
</cc:if>

<cc:if cond="&mycol.picture.zoom.isnone">
<cc:printpicture xhtml="1" obj="tablepic" suffix="'table'+&mycol.width">
</cc:if>

<cc:if cond="&mycol.picture.zoom.ispicture">
<cc:picture uid="&mycol.picture.zoom.uid" obj="hugepic">
<a href="<cc:printpictureurl obj="hugepic">"  target="_blank"><cc:printpicture xhtml="1" obj="tablepic"  suffix="'table'+&mycol.width"></a>
</cc:if>

<cc:if cond="&mycol.picture.zoom.isdownload">
<cc:download uid="&mycol.picture.zoom.uid" obj="mydownload">
<a href="<cc:print  value="&mydownload.url">"><cc:printpicture xhtml="1"  obj="tablepic" suffix="'table'+&mycol.width"></a>
</cc:if>

<cc:else>
<cc:if cond="&mycol.empty">&nbsp;<cc:else><cc:print value="&mycol.text"></cc:if>
</cc:if>
<cc:if cond="&myrow.header"> 
</th>
<cc:else> 
</td>
</cc:if> 
</cc:loop>

<cc:*>
----------------------------------------------------------------
// Endtags für <tr>, <thead> setzen für erste Tabellenzeile, //
// wenn Tabelle Spalten oder Zeilenüberschrift besitzt, // 
// sonst Endtag nur für <tr> für Standard-Tabelle ohne //
// Überschrift; //
// Anfangstag für Tabellen-Body <tbody> setzen. //
-----------------------------------------------------------------
</cc:*>

<cc:if cond="&myrow.header">
</tr>
</thead>
<tbody>
<cc:else>
</tr> 
</cc:if>


</cc:loop>

<cc:*>
--------------------------------------------------
// <tbody>-Endtag setzen, wenn Tabelle Spalten //
// Überschrift haben //
--------------------------------------------------
</cc:*>

<cc:if cond="&Ueberschrift = 1">
</tbody> 
</cc:if>

</table>

<cc:*>
-----------------------------------------------
// Variable zurücksetzen //
-----------------------------------------------
</cc:*>

<cc:set obj="Ueberschrift" value="">     

Wenn das erledigt ist, braucht ihr nur noch die entsprechenden Schritte erledigen:

1.)Die Datei jquery.tablesorter.zip runterladen und entpacken. (Findet Ihr auch auf der JQuery-Seite).
2.)im Common-Ordner von W2D die entsprechende Datei (jquery.tablesorter.min.js) kopieren und ggfs. umbennen in z.Bp. wie folgt "jqtablesorter.js". Die anderen Dateien aus dem entpackten Ordner könnt Ihr ignorieren, da W2D von Haus aus schon die enstprechende JQuery-Bibliotek mitliefert.
3.)in der global.ccml, folgenden Eintrag einfügen:

<cc:asset src="jqtablesorter.js" dst="tablesorter.js" obj="jqtablesorter" common="1" noparse="1">

4.)in der navigation.ccml:

<script type="text/javascript" src="<cc:print value="&jqtablesorter.url">"></script>

und weiter unten in der navigation.ccml der entspr. Scriptaufruf:

<script type="text/javascript">
$(document).ready(function() 
    { 
        $(".myTable").tablesorter(); 
    } 
); 
</script>

Jetzt habt Ihr eine Sortierbare Tabelle (hier nur Alphabetisch; also Datumsformate müßten noch angepaßt werden ). Per CSS-Datei das Layout festlegen, fertig !!.

Interessant an dieser Lösung ist die Funktionsvielfalt des Tablesorter, wie Einstellung eine Mehrfachselektion der Spalten od. die Möglichkeit der Erweiterung wie z.Bp. "Pagination".

So, in diesem Sinne ! Viel Erfolg

Ingo

HINWEIS: man bedenke dass alle Absatz-Tabellen in diesem Design, dann mit dieser Eigenschaft behaftet sind; z.Bp. eine Tabelle mit Bildern und Spaltenüberschrift wäre demnach auch sortierbar - kann zu lustigen aber ungewollten Effekten führen; also in diesem Fall Spaltenüberschrift-Modus deaktiveren.

[harlekin8]

... hi Folks,

es geht voran ... für Interessierte hier schauen.

Benutzer: Gast, Kennwort: Gast


Schönes WE !

[webchaot]

Hallo Ingo

I'm impressed!

Die Geschichte kommt gut, weiterhin viel Erfolg bei Deiner Entwicklungsarbeit!

Auch Dir ein schönes Weekend...

[voodoo36]

Hallo Ingo, Klasse dein Beitrag... kann ich gut für meine Fußball seite verwenden... DANKE UND WEITER SO!

[harlekin8]

Hi Folks,

UPDATE: anbei bekommen Interessierte die Datei inkl. Anleitung im Anhang zum Download der überarbeiteten Dateien für die Interaktive Tabelle. Neu hinzugekommen ist die Filterfunktion.

Wer es sich ansehen möchte ... HIER (Benutzer: Gast, Kennwort: Gast) - UNTER LEISTUNGSSPEKTRUM AM FUSS DER SEITE ...

Viel Spaß damit

[voodoo36]

Geht der Zugang nicht mehr? Wollte es mir nochmal ansehen?

[harlekin8]

Hallo Thomas,

ups ...

neuer Link selber Zugang ... habe ein paar Sachen auf der Seite geändert ...

Ganz unten auf meinem Testbalken (Akkordeon der die Tabreiter miteinschließen soll )--> Leistungsspektrum !

Bye

[Urmel]

Hallo harlekin8,

ich bin beeindruckt. Vielen Dank.

Ich denke, da kann Voodoo das Plugin Youtube für alle einstellen.

[voodoo36]

Hallo, und danke an Urmel für das Plugin Youtube!!