jQuery DataTables: largeur de la table de contrôle

Question

J'ai un problème pour contrôler la largeur d'une table à l'aide du plug-in jQuery DataTables. La table est supposée représenter 100% de la largeur du conteneur, mais finit par être une largeur arbitraire, plutôt inférieure à la largeur du conteneur.

Suggestions appréciées

La déclaration de 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 code HTML dans Firebug, vous voyez ceci (notez le style ajouté = "quot: 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é. Vous ne pouvez pas voir d'où ça vient

element.style {  
  width:0;}    

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

Answer 1

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

Préambule

  

Cet exemple montre comment utiliser simultanément DataTables avec défilement   avec les onglets de l'interface utilisateur jQuery (ou toute autre méthode par laquelle la table est   dans un élément caché (display: none) lorsqu’il est initialisé). La raison   cela nécessite une attention particulière, c’est que lorsque DataTables est   initialisé et il est dans un élément caché, le navigateur n'a pas   toutes les mesures avec lesquelles donner DataTables, et cela nécessitera   dans le désalignement des colonnes lorsque le défilement est activé.

     

La méthode pour contourner ce problème consiste à appeler l'API fnAdjustColumnSizing.   une fonction. Cette fonction calculera les largeurs de colonne qui sont   nécessaire en fonction des données actuelles, puis redessinez la table - ce qui est   exactement ce qui est nécessaire lorsque la table devient visible pour la première fois   temps. Pour cela, nous utilisons la méthode 'show' fournie par les tables de l'interface utilisateur jQuery.   Nous vérifions si le DataTable a été créé ou non (notez le   sélecteur supplémentaire pour 'div.dataTables_scrollBody', il est ajouté lorsque   DataTable est initialisé). Si la table a été initialisée, nous   redimensionnez-le. Une optimisation pourrait être ajoutée pour redimensionner uniquement le   première présentation du tableau.

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 this pour plus d'informations.

Answer 2

Vous voudrez modifier deux variables lors de l'initialisation de dataTables: bAutoWidth et aoColumns.sWidth

Supposons que vous ayez 4 colonnes d'une largeur de 50 px, 100, 120 px et 30 px:

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

Pour plus d'informations sur l'initialisation de dataTables, voir http://datatables.net/usage

Surveillez les interactions entre ce paramètre de widhts et le CSS que vous appliquez. Vous pouvez commenter votre CSS existant avant d'essayer ceci pour voir à quelle distance vous vous trouvez.

Answer 3

Eh bien, je ne connais pas bien ce plugin, mais pourriez-vous réinitialiser le style après avoir ajouté le datatable? Quelque chose comme

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

après l'appel .dataTable?

Answer 4

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

Answer 5

J'ai eu de nombreux problèmes avec les largeurs de colonne des tables de données. La solution magique pour moi consistait à inclure la ligne

table-layout: fixed;

ce css va avec le css global de la table. Par exemple, si vous avez déclaré les tables de données comme suit:

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

alors la ligne css magique irait dans la classe Loadtable

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

}

Answer 6

La solution TokenMacGuys fonctionne mieux car elle est le résultat d’un bogue dans jQdataTable. Si vous utilisez $ ('# sometabe'). DataTable (). FnDestroy (), la largeur de la table est définie sur 100px au lieu de 100%. Voici une solution rapide:

$('#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

La définition explicite des largeurs à l'aide de sWidth pour chaque colonne ET bAutoWidth: false dans l'initialisation dataTable a résolu mon problème (similaire). J'adore la pile débordante.

Answer 8

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 tout changer, mais n'en laissez qu'un comme null, afin qu'il puisse s'étirer. Si vous mettez des largeurs sur ALL, cela ne fonctionnera pas. J'espère avoir aidé quelqu'un aujourd'hui!

Answer 9

Ajoutez cette classe css à votre page, cela résoudra le problème:

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

Answer 10

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

Cela a bien fonctionné pour ajuster toute la largeur de la table. Merci à Peter Drinnan!

Answer 11

Comme dans Datatable 10.1, ceci est simple. Il suffit de mettre l'attribut width à votre table en HTML. c'est-à-dire width = " 100% &,, cela remplacera tous les styles CSS définis par DT.

Voir cette http://www.datatables.net/examples/basic_init/flexible_width. html

Answer 12

Aucune des solutions ici ne fonctionnait pour moi. Même l’exemple de la page d’accueil de datatables ne fonctionnait donc pas pour l’initialisation du datatable dans le show option.

J'ai trouvé une solution au problème. L'astuce consiste à utiliser l'option d'activation pour les onglets et à appeler fnAdjustColumnSizing () sur la table visible :

.

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

Juste pour dire que j’ai eu exactement le même problème que vous, même si j’appliquais simplement JQuery à une table normale sans Ajax. Pour une raison quelconque, Firefox ne développe pas le tableau après l'avoir révélé. J'ai résolu le problème en plaçant la table à l'intérieur d'une DIV et en appliquant les effets à la DIV.

Answer 14

Faites-vous cela dans l’événement prêt?

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

Le dimensionnement dépendra probablement du document entièrement chargé.

Answer 15

Pour les personnes ayant des difficultés à régler la largeur des tables / cellules à l'aide du plug-in d'en-tête fixe:

Les tables de données reposent sur les balises de tête pour les paramètres de largeur de colonne. En effet, c’est le seul code HTML natif, car la plupart du code HTML interne de la table est généré automatiquement.

Cependant, il se peut que certaines de vos cellules soient plus grandes que la largeur stockée à l'intérieur des cellules thead.

I.e. si votre table comporte beaucoup de colonnes (table large) et que vos lignes contiennent beaucoup de données, l'appel de l'option "sWidth": pour modifier la taille de la cellule td ne fonctionnera pas correctement car les lignes enfants redimensionnent automatiquement en fonction du débordement. content et cela se produit après que la table ait été initialisée et transmise à ses paramètres init.

Les paramètres thead "sWidth" d'origine sont remplacés (rétrécis) car datatables pense que la largeur par défaut de votre tableau est toujours de 100%. Il ne reconnaît pas le débordement de certaines cellules.

Pour résoudre ce problème, j'ai calculé la largeur de débordement et l'ai calculé en redimensionnant le tableau en conséquence après que le tableau ait été initialisé - pendant que nous y sommes, nous pouvons initialiser notre en-tête fixe à même heure:

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

Answer 16

créez votre en-tête fixe à l'intérieur du " succès " de votre appel ajax, vous ne rencontrerez aucun problème d’alignement dans les en-têtes et les lignes.

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

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

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

Answer 17

J'espère que cela aidera quelqu'un qui est toujours en difficulté.

Ne gardez pas votre table dans aucun conteneur. Faites du wrapper de la table votre conteneur après le rendu de la table. Je sais que cela peut être invalide aux endroits où vous avez autre chose en plus du tableau, mais vous pouvez toujours rajouter ce contenu.

Pour moi, ce problème se pose si vous avez une barre latérale et un conteneur qui est en réalité un décalage par rapport à cette barre latérale.

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

(j'ai ajouté un panneau panneau par défaut)
Et votre classe:

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

Answer 18

trouvez un autre lien utile concernant ce problème et cela résout mon problème.

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

tableau de largeur de force des tables de données

Answer 19

J'ai rencontré un problème similaire lorsqu’une div a été enroulée autour de la table.

Ajout de la position: le relatif l'a corrigé pour moi.

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

Answer 20

J'ai eu un problème similaire où le contenu de la table était plus volumineux que l'en-tête et le pied de table. Ajouter un div autour de la table et régler x-overflow semble avoir réglé ce problème:

        

Answer 21

Assurez-vous que tous les autres paramètres avant bAutoWidth & amp; aoColumns sont correctement entrés.Tout paramètre erroné auparavant casse cette fonctionnalité.

Answer 22

J'ai eu le même problème et j'ai constaté que le texte dans les colonnes ne se cassait pas et que l'utilisation de ce code CSS résout le problème

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

Answer 23

C’est ma façon de le faire ..

$('#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

Je rencontre le même problème aujourd'hui.

J'ai utilisé un moyen difficile pour le résoudre.

Mon code comme ci-dessous.

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

Answer 25

Cela fonctionne bien.

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