jQuery DataTables: largeur de la table de contrôle

J’ai un problème pour contrôler la largeur d’une table en utilisant le plugin jQuery DataTables. La table est supposée représenter 100% de la largeur du conteneur, mais finit par avoir une largeur arbitraire, plutôt inférieure à la largeur du conteneur.

Suggestions appréciées

La déclaration de table ressemble à ceci

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, vous voyez ceci (notez le style ajouté = “width: 0px;”)

 

En regardant dans Firebug sur les styles, 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%; } 

    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 DataTables avec le défilement avec les tabs de l’interface utilisateur jQuery (ou toute autre méthode par laquelle la table se trouve dans un élément caché (display: none) lors de son initialisation). La raison pour laquelle cela nécessite une attention particulière est que lorsque DataTables est initialisé et qu’il se trouve dans un élément masqué, le navigateur ne dispose d’aucune mesure permettant de fournir des DataTables, ce qui nécessitera un désalignement des colonnes lorsque le défilement est activé.

    La méthode pour contourner ce problème consiste à appeler la fonction API fnAdjustColumnSizing. Cette fonction calcule les largeurs de colonne nécessaires en fonction des données actuelles, puis redessine la table – ce qui est exactement ce qui est nécessaire lorsque la table devient visible pour la première fois. 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’, ceci est ajouté lorsque le DataTable est initialisé). Si la table a été initialisée, nous la redimensionnons. Une optimisation pourrait être ajoutée pour redimensionner uniquement la première présentation 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 cela pour plus d’informations.

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

    En supposant que vous avez 4 colonnes avec des largeurs de 50px, 100, 120px et 30px vous feriez:

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

    Plus d’informations sur l’initialisation des dataTables peuvent être trouvées sur http://datatables.net/usage

    Surveillez l’interaction entre ce paramètre de widhts et le CSS que vous appliquez. Vous pouvez commenter votre CSS existant avant d’essayer ceci pour voir à quel point vous êtes proche.

    Eh bien, je ne suis pas familier avec 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?

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

    J’ai eu de nombreux problèmes avec la largeur des colonnes des datatables. Le correctif magique pour moi était la ligne

     table-layout: fixed; 

    ce css va avec le css global de la table. Par exemple, si vous avez déclaré les données de la manière suivante:

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

    alors la ligne css magique irait dans la classe Loadtable

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

    }

    La solution TokenMacGuys fonctionne mieux car cela est le résultat d’un bogue dans jQdataTable. Ce qui se passe est que si vous utilisez $ (‘# sometabe’). DataTable (). FnDestroy () la largeur de la table est fixée à 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%"); } }); 

    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 laisser qu’un seul, ce qui permet de l’étirer. Si vous mettez des largeurs sur tout cela ne fonctionnera pas. J’espère que j’ai aidé quelqu’un aujourd’hui!

    Définir des largeurs explicitement en utilisant sWidth pour chaque colonne ET bAutoWidth: false dans l’initialisation dataTable résolu mon problème (similaire). J’adore la stack débordante.

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

    Cela a bien fonctionné pour ajuster la largeur de la table entière. Merci @ Peter Drinnan!

    Comme pour Datatable 10.1, c’est simple. Il suffit de mettre l’atsortingbut width à votre table en HTML. ie width = “100%”, cela remplacera tous les styles CSS définis par DT.

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

    Ajoutez cette classe css à votre page, elle corrigera le problème:

     # { width: inherit !important; } 

    Aucune des solutions ici n’a fonctionné pour moi. Même l’exemple sur la page d’accueil des datatables n’a pas fonctionné à l’initialisation de la variable datatable dans l’option show.

    J’ai trouvé une solution au problème. L’astuce consiste à utiliser l’option activate pour les tabs 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); }); 

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

    Est-ce que vous le faites dans l’événement prêt?

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

    Le dimensionnement dépendra très probablement du document en cours de chargement.

    Pour toute personne ayant des difficultés à régler la largeur de la table / cellule à l’aide du plug-in d’en-tête fixe:

    Les bases de données reposent sur des balises thead pour les parameters de largeur de colonne. C’est parce que c’est vraiment le seul fichier HTML natif car la plupart des fichiers HTML de la table sont générés automatiquement.

    Cependant, une partie de votre cellule peut être plus grande que la largeur stockée dans les cellules Thead.

    Par exemple, si votre table a beaucoup de colonnes (table large) et que vos lignes contiennent beaucoup de données, alors l’appel de “sWidth”: pour changer la taille de la cellule td ne fonctionnera pas correctement car les lignes enfants redimensionnent automatiquement contenu et cela se produit après l’initialisation de la table et passé ses parameters init.

    Le “sWidth” de la thead originale: les parameters sont remplacés (réduits) car les datatables pensent que votre table a toujours sa largeur par défaut de% 100 – elle ne reconnaît pas que certaines cellules sont saturées.

    Pour résoudre ce problème, j’ai déterminé la largeur de débordement et je l’ai prise en compte en redimensionnant la table en conséquence après l’initialisation de la table – pendant que nous y sums, nous pouvons lancer notre en-tête fixe en même temps:

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

    créer votre fixheader dans le “succès” de votre appel ajax, vous n’aurez aucun problème d’alignement dans l’en-tête et les lignes.

     success: function (result) { /* Your code goes here */ var table = $(SampleTablename).DataTable(); new $.fn.dataTable.FixedHeader(table); } 

    J’espère que cela aide quelqu’un qui a encore du mal.

    Ne conservez pas votre table dans un conteneur. Faites en sorte que le wrapper de la table devienne votre conteneur après le rendu de la table. Je sais que cela peut être invalide dans les endroits où vous avez autre chose avec la table, mais vous pouvez toujours append ce contenu.

    Pour moi, ce problème se pose si vous avez une barre latérale et un conteneur qui est en fait un décalage vers cette barre latérale.

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

    (J’ai ajouté un panneau de configuration par défaut)
    Et ta classe:

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

    trouver un autre lien utile sur ce problème et il a résolu mon problème.

     
    Left TD Datatable

    Table de largeur de force des tables de données

    J’ai rencontré un problème similaire en ayant un div enroulé autour de la table.

    Ajout de la position: relative corrigé pour moi.

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

    J’ai eu un problème similaire où le contenu de la table était plus grand que l’en-tête et le pied de page de la table. L’ajout d’un div autour de la table et la configuration de x-overflow semblent avoir sortingé ce problème:

    Assurez-vous que tous les autres parameters avant que bAutoWidth et aoColumns soient correctement entrés. Tout paramètre erroné avant va briser cette fonctionnalité.

    J’ai eu le problème similaire et a constaté que le texte dans les colonnes ne casse pas et en utilisant ce code CSS a résolu le problème

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

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

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

    J’ai utilisé un moyen délicat 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(); } }); 

    Cela fonctionne bien.

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