Jquery DataTables plugin - Versteckt Spaltennamenzeile

8

Ich entwickle eine Web-App, die nur wenige (~ 5) verschiedene Datentabellen in verschiedenen Ansichten zeigt. Ich habe versucht, die oberste Zeile mit dem Spaltennamen für nur eine der Datentabellen zu verstecken (aber die andere mit dieser Zeile), aber ohne Erfolg. Die meisten Lösungen, die ich gefunden habe, verwenden CSS, wodurch diese Zeile aus allen Datentabellen in meiner App verschwindet. Weiß jemand eine gute Lösung dafür?

Hier ist ein Beispiel, wie ich eine Datentabelle in meiner App erstelle:

%Vor%

und hier ist der CSS-Code, den ich ausprobiert habe:

%Vor%

Ich bevorzuge eine JavaScript-Lösung, falls verfügbar.

    
Asaf 17.12.2012, 14:59
quelle

4 Antworten

6

Wenn Sie eine JavaScript-Lösung möchten, können Sie den Parameter fnInitComplete der Datentabelle verwenden.

%Vor%

Wenn die jQuery-Datentabelle einen Bildlauf verwendet, ist die HTML-Struktur sehr unterschiedlich. jQuery-Databases verwenden eine "zweite Tabelle", um mit thead umzugehen. So können Sie jederzeit blättern und den Thread ansehen. Also, wenn Sie das gute thead entfernen möchten, müssen Sie den DataTable-Wrapper abrufen.

Wenn Sie dies für alle Tabellen tun, werden natürlich alle Ihre Tabellen ausgeblendet. Sie müssen also etwas verwenden, um zu wissen, ob Sie die erste Zeile für die aktuelle Tabelle (eine CSS-Klasse oder ein Attribut in der Tabelle) ausblenden müssen.

Hier ein Beispiel als Beispiel: Ссылка

    
Magus 17.12.2012, 15:03
quelle
1

Sie sollten CSS verwenden. Die Tabelle, in der Sie die Spaltentitel verbergen möchten, die Sie für eine separate Klasse benötigen. FYI - HTML-Elementen können mehrere Klassen zugeordnet werden, meist aus solchen Gründen.

Also in Ihrem HTML, wenn Sie die Tabelle deklarieren, machen Sie es so:

%Vor%

Dann in CSS können Sie verwenden:

%Vor%     
David Stetler 17.12.2012 20:56
quelle
0

Wenn das Scrollen aktiviert ist ( sScrollX / sScrollY wird in den inTable-Optionen von dataTables gesetzt), ändert dataTables die Tabellenstruktur wie folgt:

%Vor%

Und das Thead wird in div.dataTables_scrollHead > table geklont, das Original in scrollBody ist ausgeblendet, um beim vertikalen Scrollen eine feste Anzeige zu erhalten.

In Ihrem Fall müssen Sie den geklonten Thead in div.dataTables_scrollHead verstecken, Sie können dies in fnInitComplete Callback wie folgt tun:

%Vor%

Siehe jsfiddle , hoffe, dass dies dein Problem löst.

    
Roy Ling 20.12.2012 03:35
quelle
0

Was ich denke DataTables ist zwei Divs mit separaten Tabellen in ihnen zu erstellen. Es erstellt ein "header" div mit einer geschachtelten Tabelle und dann dasselbe für den body.

Versuchen Sie, diesen Code nach Abschluss der Tabelle auszuführen, möglicherweise sogar nach dem oben vorgeschlagenen fnInitComplete-Handler.

%Vor%     
lorengphd 21.12.2012 23:52
quelle