jQuery DataTables : contrôle de la largeur des tableaux

Question

J'ai un problème pour contrôler la largeur d'un tableau à l'aide du plugin jQuery DataTables. Le tableau est censé avoir une largeur égale à 100 % de celle du conteneur, mais il finit par avoir une largeur arbitraire, plutôt inférieure à celle du conteneur.

Suggestions appréciées

La déclaration de la table ressemble à ceci

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

Et le javascript

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

En inspectant le HTML dans Firebug, on voit ceci (notez l'ajout de style="width : 0px ;")

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

En regardant les styles dans Firebug, le style table.display a été remplacé. Je ne vois pas d'où cela vient.

element.style {  
  width:0;}    

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

Answer 1

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

Answer 2

Le problème est dû au fait que dataTable doit calculer sa largeur - mais lorsqu'il est utilisé à l'intérieur d'un onglet, il n'est pas visible et ne peut donc pas calculer les largeurs. La solution consiste à appeler 'fnAdjustColumnSizing' lorsque l'onglet s'affiche.

Préambule

Cet exemple montre comment les DataTables avec défilement peuvent être utilisés conjointement avec des onglets jQuery UI (ou toute autre méthode par laquelle le tableau se trouve dans un élément caché (display:none) lorsqu'il est initialisé). La raison pour laquelle raison pour laquelle cela nécessite une attention particulière, est que lorsque DataTables est est initialisée et qu'elle se trouve dans un élément caché, le navigateur n'a pas n'a pas de mesures à donner à DataTables, ce qui va nécessiter un mauvais alignement des colonnes. dans le désalignement des colonnes lorsque le défilement est activé.

La méthode pour contourner ce problème consiste à appeler la fonction API fnAdjustColumnSizing de l'API. Cette fonction calcule les largeurs de colonne nécessaires en fonction des données actuelles. nécessaire en fonction des données actuelles, puis redessine le tableau, ce qui est exactement ce qui est exactement ce qui est nécessaire lorsque le tableau devient visible pour la première fois. Pour cela, nous utilisons la méthode "show" fournie par les tableaux jQuery UI. Nous vérifions si le DataTable a été créé ou non (notez le sélecteur supplémentaire pour 'div.data'). sélecteur supplémentaire pour 'div.dataTables_scrollBody', qui est ajouté lors de l'initialisation de la DataTable. DataTable est initialisée). Si la table a été initialisée, nous la redimensionner. Une optimisation pourrait être ajoutée pour redimensionner uniquement la premier affichage de la table.

Code d'initialisation

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

Voir ce pour plus d'informations.

Answer 3

Vous voudrez modifier deux variables lorsque vous initialiserez dataTables : bAutoWidth et aoColumns.sWidth

En supposant que vous avez 4 colonnes avec des largeurs de 50px, 100, 120px et 30px, vous ferez ce qui suit :

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

Vous trouverez plus d'informations sur l'initialisation des dataTables à l'adresse suivante http://datatables.net/usage

Observez l'interaction entre ce paramètre des widhts et le CSS que vous appliquez. Vous pouvez commenter votre CSS existant avant de l'essayer pour voir si vous obtenez des résultats similaires.

Answer 4

Eh bien, je ne suis pas familier avec ce plugin, mais pourriez-vous réinitialiser le style après avoir ajouté la table de données ? Quelque chose comme

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

après l'appel .dataTable ?

Answer 5

Vous devez laisser au moins un champ sans champ fixe, par exemple :

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

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

Vous pouvez les changer tous, mais ne laisser qu'un seul comme null, pour qu'il puisse s'étirer. Si vous mettez des largeurs sur TOUS, cela ne fonctionnera pas. J'espère avoir aidé quelqu'un aujourd'hui !