jQuery DataTables: Steuertabellenbreite

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%;  
}  

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.

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.

jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

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?

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;

}}

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%");
        }

    });

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

#<your_table_id> {
    width: inherit !important;
}

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.

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!

"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

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

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

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);

});

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.

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.

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,
      });
});

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);
}        

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;}

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

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%;
}

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:

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

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
}

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' }
    ]
});

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();
    }
});

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

Das funktioniert gut.

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