jQuery DataTables: larghezza della tabella di controllo

Question

Ho un problema a controllare la larghezza di una tabella usando il plugin jQuery DataTables. La tabella dovrebbe essere il 100% della larghezza del contenitore, ma finisce per essere una larghezza arbitraria, piuttosto inferiore alla larghezza del contenitore.

Suggerimenti apprezzati

La dichiarazione della tabella è simile a questa

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

E il javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `  

Ispezionando l'HTML in Firebug, vedi questo (nota lo stile aggiunto = " width: 0px; ")

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

Guardando in Firebug gli stili, lo stile table.display è stato ignorato. Non riesco a vedere da dove provenga

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  

Answer 1

Il problema è causato dal fatto che dataTable deve calcolare la sua larghezza, ma quando viene utilizzato all'interno di una scheda non è visibile, quindi non può calcolare le larghezze. La soluzione è chiamare "fnAdjustColumnSizing" quando viene visualizzata la scheda.

Preambolo

  

Questo esempio mostra come utilizzare DataTables con scorrimento   con le schede dell'interfaccia utente jQuery (o qualsiasi altro metodo per cui la tabella è   in un elemento nascosto (display: none) quando è inizializzato). La ragione   questo richiede una considerazione speciale, è che quando DataTables è   inizializzato ed è in un elemento nascosto, il browser non ha   qualsiasi misura con cui dare DataTables, e questo richiederà   nel disallineamento delle colonne quando lo scorrimento è abilitato.

     

Il metodo per aggirare il problema è chiamare l'API fnAdjustColumnSizing   funzione. Questa funzione calcolerà le larghezze di colonna che sono   necessario in base ai dati correnti e quindi ridisegnare la tabella, ovvero   esattamente ciò che è necessario quando la tabella diventa visibile per la prima   tempo. Per questo usiamo il metodo 'show' fornito dalle tabelle dell'interfaccia utente jQuery.   Controlliamo per vedere se la DataTable è stata creata o meno (notare il   selettore extra per 'div.dataTables_scrollBody', questo viene aggiunto quando il   DataTable è inizializzato). Se la tabella è stata inizializzata, noi   ridimensionalo. È possibile aggiungere un'ottimizzazione per ridimensionare solo il file   prima visualizzazione della tabella.

Codice di inizializzazione

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

Vedi questo per maggiori informazioni.

Answer 2

Ti consigliamo di modificare due variabili quando inizializzi dataTables: bAutoWidth e aoColumns.sWidth

Supponendo che tu abbia 4 colonne con larghezze di 50px, 100, 120px e 30px dovresti fare:

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

Ulteriori informazioni sull'inizializzazione dei dati Le tabelle sono disponibili all'indirizzo http://datatables.net/usage

Controlla l'interazione tra questa impostazione di widts e il CSS che stai applicando. Potresti commentare il tuo CSS esistente prima di provare questo per vedere quanto ti avvicini.

Answer 3

Beh, non ho familiarità con quel plugin, ma potresti ripristinare lo stile dopo aver aggiunto il datatable? Qualcosa come

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

dopo la chiamata .dataTable?

Answer 4

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

Answer 5

Ho avuto numerosi problemi con le larghezze di colonna dei database. La soluzione magica per me era includere la linea

table-layout: fixed;

questo css si accompagna al css complessivo della tabella. Ad esempio, se hai dichiarato i database come i seguenti:

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

quindi la linea magica css andrebbe nella classe Loadtable

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

}

Answer 6

La soluzione TokenMacGuys funziona meglio perché questo è il risultato di un bug in jQdataTable. Quello che succede è se usi $ ('# sometabe'). DataTable (). FnDestroy () la larghezza della tabella viene impostata su 100px invece del 100%. Ecco una soluzione rapida:

$('#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%");
        }

    });

Answer 7

L'impostazione delle larghezze esplicitamente usando sWidth per ogni colonna E bAutoWidth: false nell'inizializzazione di dataTable ha risolto il mio problema (simile). Adoro lo stack traboccante.

Answer 8

Devi lasciare almeno un campo senza campo fisso, ad esempio:

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

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

Puoi cambiare tutto, ma lascia solo uno come nullo, in modo che possa allungarsi. Se metti le larghezze su TUTTO non funzionerà. Spero di aver aiutato qualcuno oggi!

Answer 9

Aggiungi questa classe css alla tua pagina, risolverà il problema:

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

Answer 10

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

Funzionava perfettamente per regolare l'intera larghezza della tabella. Grazie @ Peter Drinnan!

Answer 11

Come su Datatable 10.1, questo è semplice. Inserisci l'attributo width nella tabella in HTML. vale a dire larghezza = "100%", questo sostituirà tutti gli stili CSS impostati da DT.

Vedi questo http://www.datatables.net/examples/basic_init/flex_width. html

Answer 12

Nessuna delle soluzioni qui ha funzionato per me. Anche l'esempio sulla homepage dei database non ha funzionato quindi all'inizializzazione del datatable nel mostra opzione.

Ho trovato una soluzione al problema. Il trucco è utilizzare l'opzione di attivazione per le schede e chiamare fnAdjustColumnSizing () sulla tabella visibile :

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

});

Answer 13

Giusto per dire che ho avuto esattamente lo stesso problema, anche se stavo solo applicando JQuery a una tabella normale senza Ajax. Per qualche motivo Firefox non espande la tabella dopo averlo rivelato. Ho risolto il problema inserendo la tabella in un DIV e applicando invece gli effetti al DIV.

Answer 14

Lo stai facendo nell'evento pronto?

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

Molto probabilmente il dimensionamento dipenderà dal caricamento completo del documento.

Answer 15

Per chiunque abbia problemi a regolare la larghezza della tabella / cella utilizzando il plug-in di intestazione fisso:

I database si basano sui tag thead per i parametri di larghezza della colonna. Questo perché è davvero l'unico HTML nativo in quanto la maggior parte dell'html interno della tabella viene generata automaticamente.

Tuttavia, ciò che accade è che una parte della tua cella può essere più grande della larghezza memorizzata all'interno delle celle del thead.

vale a dire. se la tua tabella ha molte colonne (tabella larga) e le tue righe hanno molti dati, quindi chiamare "quotWidth" per modificare la dimensione della cella td non funzionerà correttamente perché le righe figlio ridimensionano automaticamente td in base all'overflow contenuto e ciò accade dopo la tabella è stata inizializzata e ha superato i parametri di inizializzazione.

I parametri originali thead "sWidth " ;: vengono sovrascritti (ridotti) perché i database pensano che la tua tabella abbia ancora la sua larghezza predefinita di% 100 - non riconosce che alcune celle sono traboccate.

Per risolvere questo problema ho capito la larghezza del trabocco e l'ho tenuto conto ridimensionando la tabella di conseguenza dopo la tabella è stata inizializzata - mentre ci siamo, possiamo iniziare la nostra intestazione fissa al stesso tempo:

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

Answer 16

crea il tuo fixedheader all'interno del " success " della tua chiamata Ajax, non avrai alcun problema di allineamento nell'intestazione e nelle righe.

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

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

        new $.fn.dataTable.FixedHeader(table);
}        

Answer 17

Spero che questo aiuti qualcuno che sta ancora lottando.

Non tenere la tabella all'interno di alcun contenitore. Rendi il wrapper della tabella il tuo contenitore dopo il rendering della tabella. So che potrebbe non essere valido nei luoghi in cui hai qualcos'altro insieme alla tabella, ma puoi sempre aggiungere nuovamente quel contenuto.

Per me, questo problema sorge se si dispone di una barra laterale e di un contenitore che è effettivamente un offset rispetto a quella barra laterale.

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

(Ho aggiunto un pannello di default)
E la tua classe:

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

Answer 18

trova un altro link utile su questo problema e ha risolto il mio problema.

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

Tabella della larghezza della forza dei database

Answer 19

Ho riscontrato un problema simile quando ho avuto un div attorno al tavolo.

Aggiunta della posizione: il parente l'ha riparata per me.

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

Answer 20

Ho avuto un problema simile in cui il contenuto della tabella era più grande dell'intestazione e del piè di pagina della tabella. L'aggiunta di un div attorno alla tabella e l'impostazione di x-overflow sembra aver risolto questo problema:

        

Answer 21

Assicurati che tutti gli altri parametri prima di bAutoWidth & amp; aoColumns sono stati inseriti correttamente. Qualsiasi parametro errato prima interromperà questa funzionalità.

Answer 22

Ho avuto il problema simile e ho scoperto che il testo nelle colonne non si interrompe e l'utilizzo di questo codice CSS ha risolto il problema

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

Answer 23

Questo è il mio modo di farlo ..

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

Answer 24

Oggi incontro lo stesso problema.

Ho usato un modo complicato per risolverlo.

Il mio codice come di seguito.

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

Answer 25

Funziona bene.

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