jQuery DataTables: controlla la larghezza della tabella

Ho un problema a controllare la larghezza di una tabella utilizzando 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 ha questo aspetto

<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 sovrascritto. Non riesco a vedere da dove proviene

element.style {  
  width:0;}    

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

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 DataTables con scorrimento può essere utilizzato insieme alle schede jQuery UI (o in effetti qualsiasi altro metodo in cui la tabella si trova in un elemento nascosto (display: nessuno) quando viene inizializzata). Il motivo per cui questo richiede una considerazione speciale, è che quando DataTables è inizializzato e si trova in un elemento nascosto, il browser non ha alcuna misurazione con cui fornire DataTables, e questo richiederà il disallineamento delle colonne quando lo scorrimento è abilitato.

Il metodo per aggirare questo problema è chiamare la funzione API fnAdjustColumnSizing. Questa funzione calcolerà le larghezze delle colonne necessarie in base ai dati correnti e quindi ridisegnerà la tabella, che è esattamente ciò che è necessario quando la tabella diventa visibile per la prima volta. Per questo utilizziamo il metodo "show" fornito dalle tabelle dell'interfaccia utente di jQuery. Controlliamo per vedere se il DataTable è stato creato o meno (notare il selettore extra per 'div.dataTables_scrollBody', questo viene aggiunto quando il DataTable viene inizializzato). Se la tabella è stata inizializzata, la ridimensioniamo. È possibile aggiungere un'ottimizzazione per ridimensionare solo la 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.

Ti consigliamo di modificare due variabili quando inizializzi dataTables: bAutoWidtheaoColumns.sWidth

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

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

Ulteriori informazioni sull'inizializzazione di dataTables sono disponibili su http://datatables.net/usage

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

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

Bene, non ho familiarità con quel plugin, ma potresti ripristinare lo stile dopo aver aggiunto il datatable? Qualcosa di simile a

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

dopo la chiamata .dataTable?

Ho avuto numerosi problemi con le larghezze delle colonne dei datatables. La soluzione magica per me era includere la linea

table-layout: fixed;

questo CSS va con il CSS generale della tabella. Ad esempio, se hai dichiarato i dati come segue:

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

quindi la riga magica css andrebbe nella classe Loadtable

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

}

La soluzione TokenMacGuys funziona meglio perché questo è il risultato di un bug in jQdataTable. Quello che succede è che se usi $ ('# Sometabe'). DataTable (). FnDestroy () la larghezza della tabella viene impostata a 100px invece che a 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%");
        }

    });

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

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

Impostazione larghezze esplicitamente utilizzando sWidthper ogni colonna e bAutoWidth: falsein dataTableinizializzazione risolto il mio (simile) problema. Adoro la pila traboccante.

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 lasciare solo uno come nullo, in modo che possa allungarsi. Se metti le larghezze su TUTTO non funzionerà. Spero di aver aiutato qualcuno oggi!

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

Questo ha funzionato bene per regolare l'intera larghezza del tavolo. Grazie @Peter Drinnan!

Come su Datatable 10.1, questo è semplice. Metti semplicemente l'attributo di larghezza alla tua tabella in HTML. cioè larghezza = "100%", sovrascriverà tutti gli stili CSS impostati da DT.

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

Nessuna delle soluzioni qui ha funzionato per me. Anche l'esempio sulla homepage dei datatables non ha funzionato quindi all'inizializzazione del datatable nell'opzione show.

Ho trovato una soluzione al problema. Il trucco è usare 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);

});

Solo per dire che ho avuto esattamente lo stesso problema di te, anche se ho semplicemente applicato JQuery a una tabella normale senza Ajax. Per qualche motivo Firefox non espande la tabella dopo averla rivelata. Ho risolto il problema inserendo la tabella all'interno di un DIV e applicando gli effetti al DIV.

Lo stai facendo nell'evento pronto?

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

È molto probabile che il dimensionamento dipenda dal caricamento completo del documento.

Per chiunque abbia problemi a regolare la larghezza della tabella / cella utilizzando il plug-in dell'intestazione fissa:

Datatables si basa sui tag thead per i parametri di larghezza delle colonne. Questo perché è davvero l'unico HTML nativo poiché la maggior parte dell'html interno della tabella viene generato automaticamente.

Tuttavia, ciò che accade è che alcune delle tue celle possono essere più grandi della larghezza memorizzata all'interno delle celle di testa.

Ad esempio, se la tua tabella ha molte colonne (tabella ampia) e le tue righe contengono molti dati, la chiamata "sWidth": per modificare la dimensione della cella td non funzionerà correttamente perché le righe figlie ridimensionano automaticamente le td in base all'overflow contenuto e questo accade dopo che la tabella è stata inizializzata e ha passato i suoi parametri di inizializzazione.

L'originale "sWidth": i parametri vengono sovrascritti (ridotti) perché i datatables pensano che la tua tabella abbia ancora la sua larghezza predefinita di% 100 - non riconosce che alcune celle sono in overflow.

Per risolvere questo problema, ho calcolato la larghezza di overflow e l'ho tenuta ridimensionando la tabella di conseguenza dopo che la tabella è stata inizializzata - già che ci siamo possiamo avviare la nostra intestazione fissa allo stesso tempo:

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

crea il tuo fixedheader all'interno del "successo" 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);
}        

Spero che questo aiuti qualcuno che sta ancora lottando.

Non tenere il tuo tavolo all'interno di nessun contenitore. Rendi il wrapper della tabella il tuo contenitore dopo il rendering della tabella. So che questo potrebbe non essere valido nei punti in cui hai qualcos'altro insieme alla tabella, ma potresti sempre aggiungere quel contenuto.

Per me, questo problema sorge se hai una barra laterale e un contenitore che in realtà è un offset rispetto a quella barra laterale.

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

(Ho aggiunto un pannello predefinito del pannello)
E la tua classe:

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

trovare un altro collegamento 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 dati

Ho riscontrato un problema simile quando avevo un div avvolto attorno al tavolo.

Aggiunta posizione: relativa fissata per me.

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

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 al tavolo e l'impostazione di x-overflow sembra aver risolto questo problema:

Assicurati che tutti gli altri parametri prima di bAutoWidth e aoColumns siano inseriti correttamente. Qualsiasi parametro sbagliato prima interromperà questa funzionalità.

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

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

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

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

Controlla anche questa soluzione. questo ha risolto facilmente il mio problema di larghezza della colonna DataTable

JQuery DataTables 1.10.20 introduce il columns.adjust()metodo che risolve il problema della scheda di attivazione / disattivazione Bootstrap

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

Fare riferimento alla documentazione: schede Scrolling e Bootstrap

Funziona bene.

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