FooTable-3-Tabelle - Paging-Fix, wenn man Daten nicht als JSON lädt (Stand FooTable 3.0.1; GEFIXT MIT 3.0.2!)

Weiterblättern gab es schon in FooTable 2. In V.3 ist die Sache einfacher. Es reicht eine Konfigurationszeile, um die Pagination unter der Tabelle anzuzeigen. Fertig. Sagt zumindest die Doku und das Paging-Demo. Funktioniert jedoch nicht mit einer statischen HTML-Tabelle. Es werden beim Öffnen der Seite immer alle Tabellen-Zeilen angezeigt.

Bild in größter Auflösung öffnen (Popup)

Der hier beschriebene Bug wurde mit FooTable Version 3.0.2 gefixt / beseitigt. Angewendet wurde die unten beschriebene CSS-Methode, die ich persönlich NICHT bevorzuge, weil sie einen Fallback für nicht-aktiviertes JavaScript benötigt.

Soll

Die Demo-Seite von FooTable 3 lädt die Tabellen-Daten (columns, rows) aus fertigen Dateien per AJAX als JSON-String. Generell klappt alles, falls man JSON einschaltet, auch, wenn die JSON-Strings dynamisch per PHP erzeugt und der Konfiguration zugefügt werden..

Bild in größter Auflösung öffnen (Popup)

Über der Seiten-Navigation werden gefiltert 10 Tabellenreihen angezeigt. Das ist die Default-Einstellung des JQuery-Plugins, die man selbstverständlich ändern kann Alle anderen Reihen sind korrekt ausgeblendet. 

Problem

Bei einer statischen HTML-Tabelle mit id="tableselector", die man z.B. mit folgendem JQuery-Script um das Paging-Feature erweitern kann, wird zwar die Navigation auch angezeigt, zusätzlich zu den zehn korrekten Zeilen leider auch alle weiteren Zeilen darüber, also auch noch falsch sortiert das Ganze.

<script type="text/javascript">
jQuery(function($){
 $("#tableselector").footable(
  {
   "paging":{"enabled":true},
  }
 );
});
</script>

Das Fehlverhalten kann man sich hier mal ansehen:

http://re-later.eu/footable3-paging/footable3-paging.php

Man muss erst alle 6 Paging-Buttons 1x geklickt haben, bevor die Navigation schließlich wie erwartet arbeitet.

Nach einem halben Tag Rumsuchen im FooTable-JavaScript gab ich schließlich auf und bat einen Bekannten (bertmert) bei GitHub eine Nachricht bei den Programmierern einzustellen. Schnelle Antwort kann man da zur Zeit (2015-11) vermutlich nicht erwarten.

Während einer schlechten Folge "Die Simpsons" fiel der Groschen.

Lösung

Wenn Paging aktiviert ist, einfach alle Reihen-Zellen (TD) im TBODY verstecken. FooTable blendet die benötigten ja eh wieder ein, wenn es initialisiert wird.

JQuery

<script type="text/javascript">
jQuery(function($){

 // Alle TD verstecken vor Initialisierung FooTable
 $("#tableselector tbody tr td").css("display", "none");

 $("#tableselector").footable(
  {
   "paging":{"enabled":true},
  }
 );
});
</script>

Oder via CSS

<style>
#tableselector tbody tr td{
 display:none;
}
</style>

Ich empfehle die JQuery-Methode. Bei der CSS-Variante muss man darauf achten, dass man ein Fallback für den Fall hat, wo ein Besucher JavaScript nicht aktiviert hat. Sonst sitzt er vor einer leeren Tabelle.

Epilog

Den Fix musste der bertmert auf GitHub noch für mich nachreichen und wir konnten Essen gehen... Ich musste (mal wieder) bezahlen. Frage ist halt, ob das ein Bug ist oder nur die Dokumentation unvollständig. Werden wir sehen. Jedenfalls konnten wir dann dieses Portal ebenfalls guten Gewissens auf FooTable Version 3 umstellen mittels JHtml-Methoden.

Danke an Re:Later und BertMert für den Fix auf meiner Seite (Volli).