Contao 3.x sortierte Tabelle

Hi,

ich habe mit dem Inhaltselement "Tabelle" mir eine Torschützenliste erstellt.

Gemäß des Buches "Websites erstellen mit Contao3" und Internetanleitungen habe ich meine erste Zeile als Kopfzeile definiert und als Sortierspalte 1 ausgewählt (Name,Tore,davon 7m).

Trotzdem sortiert er meine Tabelle nicht richtig. Wenn ich manuell die Pfeile neben den Kopfzeilentiteln betätige, funktioniert die Sortierung.

Hat jemand eine Idee, woran es liegen könnte?

Grüße

wenn Du nach dem Namen sortieren willst (also die erste Spalte) musst Du "0" eingeben

Ich möchte ja nach den Toren sortieren. Habe mich da falsch ausgedrückt sorry.
Wenn ich über die Pfeile sortieren lasse ist ein Pfeil ja auch immer dunkel gefärbt, dass ist beim 1. Aufruf der Seite nicht, als ob gar nicht sortiert wurde.

Zitat:

---

Zitat von HobbyWebProgrammer

Hat jemand eine Idee, woran es liegen könnte?

---

Ich würde das so sehen: eine sortierbare Tabelle ist etwas anderes als eine sortierte Tabelle. Die initiale Reihenfolge musst Du selber angeben. Danach ist sie dann im Frontend sortierbar.

Schade, ich dachte ich habe dann nicht nur die Möglichkeit manuell sortieren zu lassen, sondern auch dass diese Tabelle von Anfang anhand einer Spalte sortiert wird.

Kann ich das irgendwie erreichen?

*Nachtrag:
Wenn ich in der Online Demo eine Tabelle erstelle, und den Haken bei sortierte Tabelle anhake und als Spalte die Tore auswähle, dann wird die Tabelle beim 1. Aufruf direkt schon richtig sortiert. Irgendwas muss bei mir falsch sein in der Testumgebung. An CSS kann die Sortierung eigentlich nicht liegen, oder?

Das "sortiere nach" wird in einem Cookie gemerkt. Wenn Du also zum zweiten Mal auf die Seite gehst, ist die Tabelle schon sortiert. Könnte es das gewesen sein.

Ich erstelle meine sortierbaren Tabellen immer aus Daten dynamisch und dabei Initial so sortiert, wie ich es haben will. Daher kann ich nicht 100-prozentig sicher sagen, daß es nicht doch so ist, wie Du meinst.

Hi,

das mit dem Cookie hätte gut sein können. Habe alles geleert doch leider existiert das Problem noch. Eventuell sollte ich es auch dynamisch ausprobieren.

Folgend die Einstellung:

Anhang 11220

Unsortiert beim Aufruf der Seite (Spalte Tore ist die zweite Spalte, also für Contao Index 1):

Anhang 11221

Sortiert, wenn ich auf den unteren Pfeil geklickt habe:

Anhang 11222

Noch einer eine Idee eventuell? :-/

gib mal einen Link auf die Tabelle oder mach eine Testseite - mit dem Blindflug ist wenig anzufangen

So Leute,

mein erstes Homepageprojekt für meinen Handballverein ist nun online.

Das Problem mit der Sortierung der Tabelle habe ich immer noch, obwohl ich wie bereits bei früheren Posts erwähnt die Sortierung angewählt habe.
Eventuell könnt Ihr mir jetzt weiterhelfen, warum nicht automatisch nach den Toren sortiert wird... ich komme einfach nicht weiter :(.

Hier der Link direkt zur Torschützenliste:

http://def1991.mensa.uberspace.de/tv...tzenliste.html

Hier nochmal die Einstellung (Index 1 sind die Tore, also die zweite Spalte):

Anhang 11830

Folgendes ist mir aufgefallen: Wenn ich jQuery nicht lade, dann funktioniert die Sortierung. Ich brauch aber jQuery für andere Erweiterungen.

nach was soll sortiert werden, wenn überall "Null" steht? nach Name gehts ja...

Nach den Toren, aber auch wenn ich testweise Zahlen dort eintrage geht es nicht.
Das Problem ist ja, dass die Tabelle beim ersten Aufruf direkt sortiert sein soll, ohne dass ich draufklicken muss.

dann mach mal alles so wie es sein soll(te)... dann kann nochmal gucken...

so habe ich ;)

o.k. - also: die Sortierung als solches funktioniert - du wirst irgendwie angeben müssen, welche Spalte gleich sortiert sein soll...

Beim Sortieren fügt das Script u.a. eine CSS-Klasse wie "headerSortDown" hinzu - die müsste beim ersten Aufruf schon zu sehen sein... issse aber nich

sofern es im BE keine Einstellung dazu gibt, ggf. das Template anpassen - siehe http://tablesorter.com/docs/example-...sort-list.html

Ich habe oben einen Screenshot vom Backend gepostet. Ich gebe ja die Spalte an nach der direkt sortiert werden soll.
Fängt bei 0 an und ich habe 1 angegeben. Also die Tore Spalte.

... und mit Deinem CSS musst Du Dir auch was einfallen lassen - die "Zebra-Zeilen" stimmen nach der Sortierung nicht :-(

entweder per CSS3 einfärben und nicht über die Contao-Klassen (odd/even) bzw. per JS und das dann aktualisieren... guck mal wie das Tablesorter auf seiner Seite macht

muss ich das tablesorter plugin implementieren, oder kennt javascript das?

so wird die Sortierung momentan im Template gemacht:

PHP-Code:

---

<script>
<?php if ($this->hasMooTools): ?>
(function($) {
  window.addEvent('domready', function() {
    new TableSort('<?php echo $this->id; ?>', '<?php echo $this->thousandsSeparator; ?>', '<?php echo $this->decimalSeparator; ?>');
  });
})(document.id);
<?php elseif ($this->hasJQuery): ?>
(function($) {
  $(document).ready(function() {
    $('#<?php echo $this->id; ?>').tablesorter();
  });
})(jQuery);
<?php endif; ?>
</script>

---

Ich muss mich da mal reindenken wie ich dieses Tablesort dann dort einbauen kann.

PHP-Code:

---

<script>
<?php if ($this->hasMooTools): ?>
(function($) {
  window.addEvent('domready', function() {
    new TableSort('<?php echo $this->id; ?>', '<?php echo $this->thousandsSeparator; ?>', '<?php echo $this->decimalSeparator; ?>');
  });
})(document.id);
<?php elseif ($this->hasJQuery): ?>
(function($) {
  $(document).ready(function() {
    $('#<?php echo $this->id; ?>').tablesorter({ 
        // sort on the first column, order asc 
        sortList: [[0,0]] 
    }); 
  });
})(jQuery);
<?php endif; ?>
</script>

---

so vielleicht

@HobbyWebProgrammer

Eine Lösung für das Sortierproblem habe ich im Moment auch nicht, mir ist aber aufgefallen, dass sich das Hintergrundraster der Tabelle beim Sortieren unschön ändert. Dies ließe sich umgehen, wenn Du anstelle von

Code:

---

.ce_table tr.even {
    background-color: #F0FFFF;
    color: #222222;
}

---

die Anweisung

Code:

---

.ce_table tbody tr:nth-child(2n-1) {
    background-color: #F0FFFF;
    color: #222222;
}

---

verwendest.

Hi Leute,

vielen Dank für Eure Hilfe, top!!!

Den Tipp für das .css-Problem werde ich nachher versuchen umzusetzen.

So sieht die Lösung aus, die nun für mich funktioniert (zweite Spalte "Tore" wird direkt initialisiert absteigend sortiert):

PHP-Code:

---

<?php if ($this->sortable): ?>

<!-- indexer::stop -->
<script>
$(document).ready(function() { 
    // call the tablesorter plugin 
    $("table").tablesorter({ 
        // sort the second column, 0 asc | 1 desc
        sortList: [[1,1]] 
    }); 
}); 
</script>
<!-- indexer::continue -->
<?php endif; ?>

---

stimmt - sollte ja die 2. Spalte sein...

Achtung! die Sache gilt nun für alle sortierten Tabellen! entweder die Funktion mit der Startsortierung ist nicht vorgesehen oder buggy in der Umsetzung


aktuell kannst Du in PHP oder im JS-Script noch die Abfrage nach der Tabellen-ID (table_21 glaube ich) machen



und ändere Deinen Kommentar in JS in

// second column

wie frage ich die table_id ab, und wäre es so dann richtig?

PHP-Code:

---

<?php if ($this->sortable): ?>

<!-- indexer::stop --> 
<?php
if ($table_id == 21) {
  <script> 
  $(document).ready(function() {  
      // call the tablesorter plugin  
      $("table").tablesorter({  
          // sort the second column, 0 asc | 1 desc 
          sortList: [[1,1]]  
      });  
  });  
 </script> 
} else {
  <script> 
  <?php if ($this->hasMooTools): ?> 
  (function($) { 
    window.addEvent('domready', function() { 
      new TableSort('<?php echo $this->id; ?>', '<?php echo $this->thousandsSeparator; ?>', '<?php echo $this->decimalSeparator; ?>'); 
  }); 
})(document.id); 
<?php elseif ($this->hasJQuery): ?> 
(function($) { 
  $(document).ready(function() { 
    $('#<?php echo $this->id; ?>').tablesorter(); 
  }); 
})(jQuery); 
<?php endif; ?> 
</script>
}
?>
<!-- indexer::continue -->

<?php endif; ?>

---

PHP-Code:

---


<script>
<?php if ($this->hasMooTools): ?>
(function($) {
  window.addEvent('domready', function() {
    new TableSort('<?php echo $this->id; ?>', '<?php echo $this->thousandsSeparator; ?>', '<?php echo $this->decimalSeparator; ?>');
  });
})(document.id);
<?php elseif ($this->hasJQuery): ?>
(function($) {
  $(document).ready(function() {
    if('<?php echo $this->id; ?>' == 'table_21') {
       $('#<?php echo $this->id; ?>').tablesorter({ 
          // sort on the second column, order desc
          sortList: [[1,1]] 
       });
    } else {
       $('#<?php echo $this->id; ?>').tablesorter();
    }
  });
})(jQuery);
<?php endif; ?>
</script>

---

sehr geil, funktioniert :-). Danke.

Kann ich die If-Anweisung einfach mit "or" erweitern, da ich ja noch die Torschützenliste für die 1. und 3. Herren habe?

PHP-Code:

---


...
if('<?php echo $this->id; ?>' == 'table_21' OR '<?php echo $this->id; ?>' == 'table_22' OR '<?php echo $this->id; ?>' == 'table_23') { 
...

---

Vielen Dank an alle für die Hilfe.

...so für alle, die mal das gleiche Problem haben sollten das komplette Template:

PHP-Code:

---

<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<table id="<?php echo $this->id; ?>"<?php if ($this->sortable): ?> class="sortable"<?php endif; ?>>
<?php if ($this->useHeader): ?>
<thead>
<tr>
<?php foreach ($this->header as $col): ?>
  <th class="<?php echo $col['class']; ?>"><?php echo $col['content']; ?></th>
<?php endforeach; ?>
</tr>
</thead>
<?php endif; ?>
<?php if ($this->useFooter): ?>
<tfoot>
<tr>
<?php foreach ($this->footer as $col): ?>
  <td class="<?php echo $col['class']; ?>"><?php echo $col['content']; ?></td>
<?php endforeach; ?>
</tr>
</tfoot>
<?php endif; ?>
<tbody>
<?php foreach ($this->body as $class=>$row): ?>
<tr class="<?php echo $class; ?>">
<?php foreach ($row as $i=>$col): ?>
<?php if ($i == 0 && $this->useLeftTh): ?>
  <th scope="row" class="<?php echo $col['class']; ?>"><?php echo $col['content']; ?></th>
<?php else: ?>
  <td class="<?php echo $col['class']; ?>"><?php echo $col['content']; ?></td>
<?php endif; ?>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
  
<?php if ($this->sortable): ?>
<!-- indexer::stop -->
<script> 
<?php if ($this->hasMooTools): ?> 
(function($) { 
  window.addEvent('domready', function() { 
    new TableSort('<?php echo $this->id; ?>', '<?php echo $this->thousandsSeparator; ?>', '<?php echo $this->decimalSeparator; ?>'); 
  }); 
})(document.id); 
<?php elseif ($this->hasJQuery): ?> 
(function($) { 
  $(document).ready(function() {
    // sort on goals in the goalscorer lists 21, 47 and 53
    if('<?php echo $this->id; ?>' == 'table_21' || '<?php echo $this->id; ?>' == 'table_47' || '<?php echo $this->id; ?>' == 'table_53') { 
    //if('<?php echo $this->id; ?>' == 'table_21') {
       $('#<?php echo $this->id; ?>').tablesorter({  
          // sort on the second column, order desc 
          sortList: [[1,1]]  
       }); 
    } else { 
       $('#<?php echo $this->id; ?>').tablesorter(); 
    } 
  }); 
})(jQuery); 
<?php endif; ?> 
</script>
<!-- indexer::continue -->
<?php endif; ?>
</div>

---

hast Du mal geprüft, ob man geschweifte Klammern in die CSS-Klassenfelder im BE einfügen kann??

wenn ja, wäre es hiermit einfacher und flexibler gegangen: http://tablesorter.com/docs/example-meta-sort-list.html

als Klasse dann "tablesorter {sortlist: [[1,1]]}"

Ich probiere es mal nachher noch aus und schreibe dann nochmal, ob es geht.

Also diese Fehlermeldung kommt bei mir:

Zitat:

---

Das moo_tablesort- oder j_tablesort-Template muss im Seitenlayout eingebunden sein.

---

Und in dieser Diskussion wurde ja auch ein ganzes Template für die Problemlösung aufgeführt.

Wie/wo binde ich nun diese Templates ins Seitenlayout ein?

Im Seitenlayout, das ist ein Häkchen in der entsprechenden Sektion bei JQuery / Mootools

Danke vielmals. Ich hatte da schon mal gesucht und jetzt mit Ihrem Hinweis auch gefunden!!! Danke!

Gern. Und nur weil ich Moderatorin bin brauchst Du mich nicht zu Siezen ... ;-)


Sent from my iPhone using Tapatalk

Sehr geehrte Frau Moderatorin,
Hier noch ein Beitrag zu diesem Thema:
https://community.contao.org/de/show...t-Contao-3-2-9

[QUOTE=lucina;321892]Gern. Und nur weil ich Moderatorin bin brauchst Du mich nicht zu Siezen ... ;-)


Also gerne DU - ich bin sonst nicht so.... :-)