jQuery DataTables: largeur de la table de contrôle
J'ai un problème pour contrôler la largeur d'une table à l'aide du plugin 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é = "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%;
}
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 défilement avec les onglets de l'interface utilisateur jQuery (ou toute autre méthode dans laquelle la table se trouve dans un élément masqué (display: none) lors de son initialisation). Cela nécessite une attention particulière, c'est que lorsque DataTables est initialisé et qu'il se trouve dans un élément masqué, le navigateur ne dispose d'aucune mesure permettant d'indiquer DataTables, ce qui nécessitera 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. 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 de 'div.dataTables_scrollBody', qui 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 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.
Vous voudrez Tweak deux variables lorsque vous initialisez dataTables: bAutoWidth et aoColumns.sWidth
En supposant que vous ayez 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 de dataTables sont disponibles sur 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.
jQuery('#querytableDatasets').dataTable({
"bAutoWidth": false
});
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?
J'ai eu de nombreux problèmes avec les largeurs de colonne de datatables. La solution magique pour moi était d'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;
}
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%");
}
});
Définir explicitement les largeurs en utilisant sWidth pour chaque colonne AND bAutoWidth: false dans dataTable initialisation a résolu mon problème (similaire). J'adore la pile débordante.
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 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!
Ajoutez cette classe css à votre page, cela résoudra le problème:
#<your_table_id> {
width: inherit !important;
}
"fnInitComplete": function() {
$("#datatables4_wrapper").css("width","60%");
}
Cela a bien fonctionné pour ajuster toute la largeur de la table. Merci à Peter Drinnan!
Comme dans Datatable 10.1, c'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 ceci http://www.datatables.net/examples/basic_init/flexible_width.html
Aucune des solutions ici ne fonctionnait pour moi. Même l'exemple sur page d'accueil de datatables ne fonctionnait donc pas pour l'initialisation du datatable dans l'option show.
J'ai trouvé une solution au problème. L'astuce consiste à utiliser l'option d'activation pour les onglets et à appeler fnAdjustColumnSizing () sur le tableau 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);
});
Faites-vous cela dans l'événement ready?
$ (document) .ready (function () {...});
Le dimensionnement dépendra probablement du document entièrement chargé.
Juste pour dire que j'ai eu exactement le même problème que vous, même si je venais d'appliquer 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.
trouver un autre lien utile sur ce problème et cela a résolu mon problème.
<table width="100%">
<tr>
<td width="20%"> Left TD <td>
<td width="80%"> Datatable </td>
</tr>
</table>
J'espère que cela aide quelqu'un qui a encore du mal à se battre.
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 alors 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;}
Pour ceux qui ont du mal à ajuster la largeur de la table/cellule en utilisant le plugin header header:
Datatables s'appuie sur les balises de tête pour les paramètres de largeur de colonne. C'est parce que c'est vraiment le seul code HTML natif, car la plupart du code HTML interne de la table est généré automatiquement.
Cependant, ce qui se passe est que certaines de vos cellules peuvent être plus grandes que la largeur stockée à l'intérieur des cellules thead.
C'est à dire. si votre table a beaucoup de colonnes (table large) et que vos lignes ont beaucoup de données, alors appeler "sWidth": changer la taille de la cellule td ne fonctionnera pas correctement car les lignes enfants redimensionnent automatiquement en fonction du contenu de débordement et cela se produit après la table a été initialisée et a passé ses paramètres init.
La thead d'origine "sWidth": les paramètres sont remplacés (rétrécis) car datatables pense que votre table a toujours sa largeur par défaut de 100% - elle 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 je l’ai expliqué en redimensionnant le tableau en conséquence après le tableau a été initialisé - tant que nous y sommes nous pouvons initier notre en-tête fixe en même temps:
$(document).ready(function() {
$('table').css('width', '120%');
new FixedHeader(dTable, {
"offsetTop": 40,
});
});
si vous créez votre poste fixe à l'intérieur du "succès" de votre appel ajax, vous ne rencontrerez 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'ai eu un problème similaire où le contenu de la table était plus grand que l'en-tête et le pied de table. L'ajout d'un div autour de la table et la définition de x-overflow semblent avoir résolu ce problème:
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();
}
});
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
}
Assurez-vous que tous les autres paramètres antérieurs à bAutoWidth & aoColumns ont été correctement entrés. Tout paramètre erroné auparavant annulera cette fonctionnalité.
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' }
]
});
J'ai rencontré un problème similaire quand une div a été enroulée autour de la table.
Ajout position: le parent l'a corrigé pour moi.
#report_container {
float: right;
position: relative;
width: 100%;
}