jQuery DataTables: Steuertabellenbreite

98

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%;  
}  
John Mac
quelle
Zu Ihrer Information, ich bin gerade auf ein Problem gestoßen, bei dem eine Spalte in IE8 nicht richtig angepasst wurde. Der Täter war ein Bild, auf dem das max-widthGrundstü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, um widthdas Problem zu beheben.
John Bubriski

Antworten:

61

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

Dieses Beispiel zeigt, wie DataTables mit Bildlauf zusammen mit Registerkarten der jQuery-Benutzeroberfläche verwendet werden können (oder mit einer anderen Methode, bei der sich die Tabelle bei der Initialisierung in einem ausgeblendeten Element (Anzeige: keine) befindet). Der Grund, warum dies besonders berücksichtigt werden muss, ist, dass der Browser bei der Initialisierung von DataTables und in einem verborgenen Element keine Messungen hat, mit denen DataTables angegeben werden können. Dies erfordert eine Fehlausrichtung der Spalten, wenn das Scrollen aktiviert ist.

Die Methode, um dies zu umgehen, besteht darin, die API-Funktion fnAdjustColumnSizing aufzurufen. Diese Funktion berechnet die benötigten Spaltenbreiten basierend auf den aktuellen Daten und zeichnet dann die Tabelle neu. Dies ist genau das, was benötigt wird, wenn die Tabelle zum ersten Mal sichtbar wird. Hierfür verwenden wir die 'show'-Methode, die von jQuery-UI-Tabellen bereitgestellt wird. Wir prüfen, ob die DataTable erstellt wurde oder nicht (beachten Sie den zusätzlichen Selektor für 'div.dataTables_scrollBody', der hinzugefügt wird, wenn die DataTable initialisiert wird). Wenn die Tabelle initialisiert wurde, ändern wir ihre Größe. Eine Optimierung könnte hinzugefügt werden, um die Größe nur der ersten Anzeige der Tabelle zu ändern.

Initialisierungscode

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

Sehen Sie diese für weitere Informationen.

Arik Kfir
quelle
1
Ich habe auch das gleiche Problem mit @John McC, aber ich habe meine Datentabelle auf ein Modal angewendet, ich verwende Bootstrap und ich bin mit diesem Problem festgefahren. Wissen Sie, wie man es mit Bootstrap-Modal anstelle von Tabs implementiert? Ich brauche wirklich deine Hilfe
cfz
Ich empfehle zu verwenden window.resize, schauen Sie sich ein Beispiel an legacy.datatables.net/ref#fnAdjustColumnSizing
KingRider
"aoColumnDefs": [{"sWidth": "10%", "aTargets": [-1]}]. Ich behebe mein Problem, füge dies einfach hinzu, danke.
Mina Chen
55

Sie möchten zwei Variablen optimieren, wenn Sie dataTables initialisieren: bAutoWidthundaoColumns.sWidth

Angenommen, Sie haben 4 Spalten mit einer Breite von 50 Pixel, 100 Pixel, 120 Pixel und 30 Pixel, würden Sie Folgendes tun:

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    }); 

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.

artlung
quelle
mmm. Sie sagen, dass dies ein Ergebnis von bAutoWidth ist: true, das keine besonders intelligenten Entscheidungen für die Spaltenbreite trifft.
John Mac
Das ist was ich denke. Meine Tabellen springen herum, wenn die Daten in ihrer Länge inkonsistent sind. Aus diesem Grund habe ich die Parameter aoColumns und bAutoWidth eingegeben.
Artlung
1
wunderschönen. habe mein Problem total behoben.
Laguna
Super @Laguna! Ich liebe es zu hören, dass alte Antworten wie diese immer hilfreich sind.
Artlung
1
"bAutoWidth": falsche Werke. Aber nur eine Frage. Ist es eine gute Praxis oder nicht, wenn ich meine <th> -Tags mit Breitendetails versehen habe?
FinnTheHumin
52
jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});
Suraj
quelle
2
Das war die richtige Antwort für mich. Ich verwende Boostrap .table-responsive. Wenn die datierbare Codeeinstellung ihre eigene Breite hat, wird sie gestört.
Mac10688
Kam hierher, um meine Lösung für dieses dumme Problem zu veröffentlichen, bei dem die Eigenschaft width im Tab-Change-Ereignis entfernt wurde, aber dies scheint das Problem behoben zu haben. Vielen Dank. +1
Topher
Ich habe 3 Registerkarten und Datentabellen auf den ersten beiden Registerkarten, Tabelle auf der zweiten Registerkarte war nicht in voller Breite. Dies hat mein Problem behoben. danke
Mike Volmar
47

Nun, ich bin mit diesem Plugin nicht vertraut, aber können Sie den Stil nach dem Hinzufügen der Datentabelle zurücksetzen? Etwas wie

$("#querydatatablesets").css("width","100%")

nach dem .dataTable-Aufruf?

SingleNegationElimination
quelle
1
Ich habe festgestellt, dass dies auch die beste Lösung ist, da in meinem Fall die Tabelle auch auf 100 Pixel Breite festgelegt wurde, als eine der Spalten unsichtbar gemacht wurde - siehe hier: datatables.net/forums/discussion/3417/…
Mydoghaswürmer
Dies ist die Lösung, die für mich funktioniert hat. es gibt eine feinere Kontrolle über das CSS der Datentabelle im Vergleich zu oTable.fnAdjustColumnSizing (); Lösung zuvor erwähnt.
Vijay Rumao
11

Ich hatte zahlreiche Probleme mit der Spaltenbreite von Datentabellen. Die magische Lösung für mich bestand darin, die Linie einzuschließen

table-layout: fixed;

Dieses CSS passt zum gesamten CSS der Tabelle. Zum Beispiel, wenn Sie die Datentabellen wie folgt deklariert haben:

LoadTable = $('#LoadTable').dataTable.....

dann würde die magische CSS-Zeile in die Klasse Loadtable gehen

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}}

user1842675
quelle
2
Das hilft, aber jetzt haben meine Spalten alle seltsame Größen. Ich hätte erwartet, dass die Spalten mit den meisten Daten die größte prozentuale Breite haben würden.
CJBarth
7

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:

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });
Peter Drinnan
quelle
6

Wenn Sie diese CSS-Klasse zu Ihrer Seite hinzufügen, wird das Problem behoben:

#<your_table_id> {
    width: inherit !important;
}
Bahadir Tasdemir
quelle
1
Ich hatte ein separates Problem, gegen das ich in den letzten 30 Minuten gekämpft habe - diese Codezeile hat es behoben -, also wollte ich mich nur für diesen zufälligen Kommentar bedanken.
user1274820
1
Genau deshalb gebe ich zusätzliche Antworten
Bahadir Tasdemir
5

Das explizite Festlegen von Breiten sWidthfür jede Spalte UND bAutoWidth: falsebei der dataTableInitialisierung löste mein (ähnliches) Problem. Ich liebe den überfüllten Stapel.

Leuchtstoffröhre
quelle
5

Sie müssen mindestens ein Feld ohne festes Feld belassen, zum Beispiel:

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

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!

heilen85
quelle
1
Das war es für mich, ich habe alle Spalten auf 1px gesetzt. Wenn man eins weglässt, funktioniert es auf magische Weise. Vielen Dank!
Demoncodemonkey
4
"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

Dies funktionierte gut, um die gesamte Tischbreite anzupassen. Danke @Peter Drinnan!

Nilani Algiriyage
quelle
Ich konnte die Tabelle nicht dazu bringen, den übergeordneten Container richtig zu füllen. Es wurde versucht, das CSS der Tabelle und ihres Wrappers an die Breite anzupassen: 100%; ohne merklichen Unterschied. Sobald ich die oben erwähnte Methode ausprobiert habe, hat es Wunder gewirkt, aber ich zeige nicht auf den Wrapper, sondern musste auf den Tisch zeigen, der selbst ist. Aber vielen Dank Nilani !!
Logic1
3

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 :

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
    activate: function (event, ui) {
        var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
        if (oTable.length > 0) {
            oTable.fnAdjustColumnSizing();
        }
    }
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
    "sScrollY": "200px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "aoColumnDefs": [
        { "sWidth": "10%", "aTargets": [-1] }
    ]
};
// initialize data table
$('table').dataTable(optDataTables);

});
Helmut Steiner
quelle
2

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.

Dave
quelle
2

Machst du das im Ready-Event?

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

Die Größe hängt höchstwahrscheinlich davon ab, ob das Dokument vollständig geladen ist.

Mufaka
quelle
Schauen Sie sich den Code oben an - er geschieht im Rückruf vom Ajax-Laden der Tab-Datasets des div-Containers. Tabelle #querytableDatasets wird bereitgestellt von / cgi-bin / qryDatasets
John Mac
Ich verstehe das, ich bin mir nicht sicher, wann das passiert. Beim Betrachten der Plugin-Quelle schien es das einzige Mal zu sein, dass eine 0px-Breite festgelegt werden konnte, wenn die richtige Tabelle offSetWidth nicht ermittelt werden konnte, und ich nahm an, dass dies mit einer zu frühen Ausführung zusammenhängt.
Mufaka
hmm. Ich habe angenommen, dass der Rückruf vom Ajax-Ladevorgang aufgerufen wird, nachdem die Tabelle #querytableDatasets geladen wurde. Denken Sie, dass dies möglicherweise nicht der Fall ist?
John Mac
Übrigens, um Ihre Frage zu beantworten, wann dies ausgeführt wird, ist es eine Antwort auf den Benutzer, der auf eine Schaltfläche klickt
John Mac
Hmm, ich bin mir nicht sicher, ob ich dann noch etwas hinzufügen kann. Wenn es sich um einen Klick auf eine Schaltfläche handelt, ist das Dokument vollständig geladen und es gibt keinen Grund, dies in das Ereignis ready zu setzen. Sie können mit der Breite des Tabellencontainers herumspielen oder versuchen, das (DataTables-Plugin) außerhalb Ihres aktuellen Layouts zum Laufen zu bringen.
Mufaka
1

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:

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});
DrewT
quelle
1

Erstellen Sie Ihren Fixedheader innerhalb des "Erfolgs" Ihres Ajax-Aufrufs. Sie haben keine Ausrichtungsprobleme in Header und Zeilen.

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}        
Chandra Sekhar Beluduru
quelle
1

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.

$(YourTableName+'_wrapper').addClass('mycontainer');

(Ich habe eine Panel-Panel-Standardeinstellung hinzugefügt.)
Und Ihre Klasse:

.mycontainer{background-color:white;padding:5px;}
abcdefghiraj
quelle
1

Finden Sie einen weiteren nützlichen Link zu diesem Problem, der mein Problem behoben hat.

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

Datentabellen erzwingen die Breitentabelle

Chuanzhou Tang
quelle
0

Ich stieß auf ein ähnliches Problem, als ein Div um den Tisch gewickelt wurde.

Position hinzufügen: relativ behoben für mich.


#report_container {
 float: right;
 position: relative;
 width: 100%;
}
Mardala
quelle
0

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:

Nick Holden
quelle
0

Stellen Sie sicher, dass alle anderen Parameter vor bAutoWidth & aoColumns korrekt eingegeben wurden. Jeder falsche Parameter zuvor unterbricht diese Funktionalität.

DejanR
quelle
0

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

th,td{
max-width:120px !important;
word-wrap: break-word
}
h0mayun
quelle
0

Dies ist meine Art, es zu tun ..

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});
Kevin Khew
quelle
0

Ich treffe heute das gleiche Problem.

Ich habe es auf knifflige Weise gelöst.

Mein Code wie unten.

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});
Kenneth Wong
quelle
0

Ü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 wird

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

Weitere Informationen finden Sie in der Dokumentation: Registerkarten "Scrollen" und "Bootstrap"

PNP
quelle
-1

Das funktioniert gut.

#report_container {
   float: right;
   position: relative;
   width: 100%;
}
Sam
quelle