Ich habe ein Problem beim Steuern der Breite einer Tabelle mithilfe des jQuery DataTables-Plugins. Die Tabelle soll 100% der Containerbreite ausmachen, hat jedoch eine beliebige Breite und nicht die Containerbreite.
Vorschläge geschätzt
Die Tabellendeklaration sieht so aus
<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3" width="100%">
Und das Javascript
jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){
jQuery('#querytableDatasets').dataTable({
"bPaginate": false,
"bInfo": false,
"bFilter": false
});
}); `
Wenn Sie den HTML-Code in Firebug überprüfen, sehen Sie dies (beachten Sie den hinzugefügten Stil = "width: 0px;")
<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3" width="100%" style="width: 0px;">
Wenn Sie sich in Firebug die Stile ansehen, wurde der style.display-Stil überschrieben. Ich kann nicht sehen, woher das kommt
element.style {
width:0;}
-- dataTables.css (line 84
table.display {
margin:0 auto;
width:100%;
}
jquery
datatables
jquery-datatables
John Mac
quelle
quelle
max-width
Grundstück festgelegt war. Anscheinend mag IE8 diese Eigenschaft nicht allzu sehr und ignorierte sie in Bezug auf Datentabellen, obwohl die Bildgröße auf dem Bildschirm korrekt war. Ändern Sie es, umwidth
das Problem zu beheben.Antworten:
Das Problem wird dadurch verursacht, dass dataTable seine Breite berechnen muss. Wenn es jedoch in einer Registerkarte verwendet wird, ist es nicht sichtbar und kann daher die Breite nicht berechnen. Die Lösung besteht darin, 'fnAdjustColumnSizing' aufzurufen, wenn die Registerkarte angezeigt wird.
Präambel
Initialisierungscode
Sehen Sie diese für weitere Informationen.
quelle
window.resize
, schauen Sie sich ein Beispiel an legacy.datatables.net/ref#fnAdjustColumnSizingSie möchten zwei Variablen optimieren, wenn Sie dataTables initialisieren:
bAutoWidth
undaoColumns.sWidth
Angenommen, Sie haben 4 Spalten mit einer Breite von 50 Pixel, 100 Pixel, 120 Pixel und 30 Pixel, würden Sie Folgendes tun:
Weitere Informationen zur Initialisierung von dataTables finden Sie unter http://datatables.net/usage
Achten Sie auf die Interaktion zwischen dieser Einstellung von Widhts und dem CSS, das Sie anwenden. Sie können Ihr vorhandenes CSS kommentieren, bevor Sie dies versuchen, um zu sehen, wie nahe Sie kommen.
quelle
quelle
Nun, ich bin mit diesem Plugin nicht vertraut, aber können Sie den Stil nach dem Hinzufügen der Datentabelle zurücksetzen? Etwas wie
nach dem .dataTable-Aufruf?
quelle
Ich hatte zahlreiche Probleme mit der Spaltenbreite von Datentabellen. Die magische Lösung für mich bestand darin, die Linie einzuschließen
Dieses CSS passt zum gesamten CSS der Tabelle. Zum Beispiel, wenn Sie die Datentabellen wie folgt deklariert haben:
dann würde die magische CSS-Zeile in die Klasse Loadtable gehen
}}
quelle
Die TokenMacGuys-Lösung funktioniert am besten, da dies auf einen Fehler in jQdataTable zurückzuführen ist. Wenn Sie $ ('# sometabe'). DataTable (). FnDestroy () verwenden, wird die Tabellenbreite auf 100px anstatt auf 100% gesetzt. Hier ist eine schnelle Lösung:
quelle
Wenn Sie diese CSS-Klasse zu Ihrer Seite hinzufügen, wird das Problem behoben:
quelle
Das explizite Festlegen von Breiten
sWidth
für jede Spalte UNDbAutoWidth: false
bei derdataTable
Initialisierung löste mein (ähnliches) Problem. Ich liebe den überfüllten Stapel.quelle
Sie müssen mindestens ein Feld ohne festes Feld belassen, zum Beispiel:
Sie können alle ändern, aber nur eine als null belassen, damit sie sich dehnen kann. Wenn Sie auf ALL Breiten setzen, funktioniert dies nicht. Hoffe ich habe heute jemandem geholfen!
quelle
Dies funktionierte gut, um die gesamte Tischbreite anzupassen. Danke @Peter Drinnan!
quelle
Wie bei Datatable 10.1 ist dies unkompliziert. Fügen Sie Ihrer Tabelle einfach das Attribut width in HTML hinzu. dh width = "100%", dies überschreibt alle von DT festgelegten CSS-Stile.
Siehe diese http://www.datatables.net/examples/basic_init/flexible_width.html
quelle
Keine der Lösungen hier hat bei mir funktioniert. Selbst das Beispiel auf der Datatables-Homepage funktionierte daher bei der Initialisierung der Datentabelle in der Show-Option nicht.
Ich habe eine Lösung für das Problem gefunden. Der Trick besteht darin , die Aktivierungsoption für Registerkarten zu verwenden und fnAdjustColumnSizing () für die sichtbare Tabelle aufzurufen :
quelle
Um nur zu sagen, ich hatte genau das gleiche Problem wie Sie, obwohl ich JQuery nur auf einen normalen Tisch ohne Ajax angewendet habe. Aus irgendeinem Grund erweitert Firefox die Tabelle nicht, nachdem sie enthüllt wurde. Ich habe das Problem behoben, indem ich die Tabelle in einen DIV gelegt und stattdessen die Effekte auf den DIV angewendet habe.
quelle
Machst du das im Ready-Event?
Die Größe hängt höchstwahrscheinlich davon ab, ob das Dokument vollständig geladen ist.
quelle
Für alle, die Probleme beim Anpassen der Tabellen- / Zellenbreite mithilfe des Plugins für feste Header haben:
Datatables verwendet für die Spaltenbreitenparameter die Thead-Tags. Dies liegt daran, dass es wirklich das einzige native HTML ist, da der größte Teil des inneren HTML der Tabelle automatisch generiert wird.
Was jedoch passiert, ist, dass ein Teil Ihrer Zelle größer sein kann als die Breite, die in den Kopfzellen gespeichert ist.
Dh wenn Ihre Tabelle viele Spalten enthält (breite Tabelle) und Ihre Zeilen viele Daten enthalten, funktioniert der Aufruf von "sWidth": Das Ändern der td-Zellengröße funktioniert nicht richtig, da die Größe der untergeordneten Zeilen aufgrund des Überlaufs automatisch geändert wird Inhalt und dies geschieht, nachdem die Tabelle initialisiert und ihre Init-Parameter übergeben wurden.
Der ursprüngliche Thead "sWidth": Parameter werden überschrieben (verkleinert), da Datentabellen glauben, dass Ihre Tabelle immer noch die Standardbreite von% 100 hat - sie erkennt nicht, dass einige Zellen übergelaufen sind.
Um dies zu beheben, habe ich die Überlaufbreite ermittelt und sie berücksichtigt, indem ich die Größe der Tabelle nach der Initialisierung entsprechend geändert habe. Während wir dabei sind, können wir gleichzeitig unseren festen Header initiieren:
quelle
Erstellen Sie Ihren Fixedheader innerhalb des "Erfolgs" Ihres Ajax-Aufrufs. Sie haben keine Ausrichtungsprobleme in Header und Zeilen.
quelle
Hoffe, das hilft jemandem, der immer noch Probleme hat.
Bewahren Sie Ihren Tisch nicht in einem Behälter auf. Machen Sie den Wrapper der Tabelle zu Ihrem Container, nachdem die Tabelle gerendert wurde. Ich weiß, dass dies an Stellen ungültig sein kann, an denen Sie neben der Tabelle noch etwas anderes haben, aber dann können Sie diesen Inhalt jederzeit wieder anhängen.
Für mich tritt dieses Problem auf, wenn Sie eine Seitenleiste und einen Container haben, die tatsächlich einen Versatz zu dieser Seitenleiste darstellen.
(Ich habe eine Panel-Panel-Standardeinstellung hinzugefügt.)
Und Ihre Klasse:
quelle
Finden Sie einen weiteren nützlichen Link zu diesem Problem, der mein Problem behoben hat.
Datentabellen erzwingen die Breitentabelle
quelle
Ich stieß auf ein ähnliches Problem, als ein Div um den Tisch gewickelt wurde.
Position hinzufügen: relativ behoben für mich.
quelle
Ich hatte ein ähnliches Problem, bei dem der Inhalt der Tabelle größer war als die Kopf- und Fußzeile der Tabelle. Das Hinzufügen eines Divs um die Tabelle und das Festlegen des x-Überlaufs scheint dieses Problem behoben zu haben:
quelle
Stellen Sie sicher, dass alle anderen Parameter vor bAutoWidth & aoColumns korrekt eingegeben wurden. Jeder falsche Parameter zuvor unterbricht diese Funktionalität.
quelle
Ich hatte das ähnliche Problem und stellte fest, dass Text in Spalten nicht kaputt geht und die Verwendung dieses CSS-Codes das Problem löste
quelle
Dies ist meine Art, es zu tun ..
quelle
Ich treffe heute das gleiche Problem.
Ich habe es auf knifflige Weise gelöst.
Mein Code wie unten.
quelle
Überprüfen Sie auch diese Lösung. Dies löste mein Problem mit der Spaltenbreite von DataTable leicht
JQuery DataTables 1.10.20 führt eine
columns.adjust()
Methode ein, mit der das Problem mit der Registerkarte "Bootstrap-Umschaltung" behoben wirdWeitere Informationen finden Sie in der Dokumentation: Registerkarten "Scrollen" und "Bootstrap"
quelle
Das funktioniert gut.
quelle