FooTable-2-Tabelle in verstecktem Bereich (display:none) initialisieren (Stand FooTable 2.0.3)

Eine Tabelle, die sich mit Hilfe des JQuery-Plugins FooTable V2 responsiv umordnet, wollte sich nicht vollständig initialisieren, da sie sich in einem versteckten Bereich mit Collapse-Button befand (display: none;). Nach einigem Kramen im Internet und Scheitern, habe ich mir ein eigenes Script ausgearbeitet. Sicher nicht der Stein der Weisen, aber klappt in meiner Umgebung.

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

Irgendwie kollidierten meine Versuche immer mit irgendetwas anderem auf der Seite oder der Tabellenaufbau wurde quälend langsam, wenn ich versuchte die Tabelle erst nach Klick auf einen Bootstrap-Collapse-Button beim erstmaligen Einblenden zu initialisieren.

Auch der Aufbau der Tabelle via AJAX oder PHP plus JSON passte mir nicht (geht mit FooTable recht simpel). Ich wollte die HTML-Tabelle javascriptunabhängig mit PHP generieren und anzeigen. Wenn JSON-Aufbau, dann wäre sowieso FooTable V3 die bessere Alternative, weil einige Macken der Version 3.0.1 per JSON nicht auftreten (aus dem HTML verschwindende class-Attribute, Bilder, Links werden aus Tabelle entfernt u.v.a..).

Lösung

Die Idee war folgend, die FooTable-2-Tabelle per JQuery-JavaScript nach dem Laden der Seite (DOM) aus dem versteckten Bereich herauszuholen, um sie in einem zweiten Schritt zu initialiseren und in einem dritten wieder zurückzuschreiben in den versteckten Bereich. Dabei nutze ich die Style-Attribute visibility und display. 

Folgend am Beispiel einer Tabelle mit id="bootstrap-3-variables"., die zuvor vollständig per PHP erstellt wurde.

<table class="table" id="bootstrap-3-variables">...</table>

(function($){
$(document).ready(function(){

 // Bspw. innerhalb Spoiler versteckt, der ein display:none; hat?
 var tableIsHidden = $("#bootstrap-3-variables").is(":hidden");
	
 // Falls Tabelle in einem hidden Bereich	
 if (tableIsHidden)
 {
  
  // Display zur Sicherheit auf block, aber dafür visibility auf hidden, damit User nix mitbekommt.
  $("#bootstrap-3-variables").css("visibility", "hidden").css("display", "block");

  // In einen Container mit unverwechselbsrer id packen. In diesen wird nach getaner Arbeit die
  // Tabelle wieder zurückgeschrieben.
  $("#bootstrap-3-variables").wrap("<div id=getFooTableBack0979880001446304814></div>");

  // In den BODY verschieben, in der Annahme, dass dieser wohl nicht versteckt (hidden) ist.
  $("body").append($("#bootstrap-3-variables"));
 }

 // In jedem Falle FooTable initialiseren, egal ob tableIsHidden true oder nicht. Ggf. mit Optionen (hier entfernt).
 $("#bootstrap-3-variables").footable();
		
 if (tableIsHidden)
 {
  // Wieder zurück in oben generierten, wrappenden DIV-Container im versteckten Bereich.
  $("#getFooTableBack0979880001446304814").append($("#bootstrap-3-variables"));

  // Da es sein könnte, dass das FooTable-Script eigene Styles eingebaut hat,
  // etwas vorsichtiger beim Entfernen meiner obigen visibility- und display-Styles.
  $("#bootstrap-3-variables").css( "display", function(index, val){
   if (val == "block") return "";
  });

  $("#bootstrap-3-variables").css( "visibility", function(index, val){
   if (val == "hidden") return "";
  });
  
  // Pedanterie
  if (! $("#bootstrap-3-variables").attr("style"))
  {
   $("#bootstrap-3-variables").removeAttr("style");
  }
 }

});
})(jQuery);

Die eindeutige id des Wrap-Containers generiere ich per PHP und microtime(). Deshalb sieht sie so strange aus.

Und natürlich wäre es schicker, das Tabellenobjekt $("#bootstrap-3-variables") anfangs in eine Variable, z.B. $thisTable zu packen, statt mehrfach auszuschreiben.