jQuery DataTables: largeur de la table de contrôle

vous voudrez modifier deux variables lorsque vous initialiserez les données: 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 à http://datatables.net/usage

surveillez l'interaction entre ce réglage de widhts et le CSS que vous appliquez. Vous pouvez commenter votre CSS existant avant d'essayer ceci pour voir à quel point vous vous rapprochez.

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 le .dataTable appel?

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

j'ai eu de nombreux problèmes avec les largeurs de colonnes de données. La solution magique pour moi était d'inclure la ligne

table-layout: fixed;

ce css va avec l'ensemble css du tableau. Par exemple, si vous avez déclaré les données comme suit:

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

alors la ligne CSS magique irait dans la classe chargeable

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

}

solution de TokenMacGuys fonctionne le mieux parce que c'est le résultat d'un bug dans jQdataTable. Ce qui se passe, c'est si vous utilisez $('#sometabe').dataTable ().fnDestroy () la largeur de la table est définie à 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%");
        }

    });

il faut 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 en laisser un seul nul, pour qu'il puisse s'étirer. Si vous mettez des largeurs sur tout cela ne fonctionnera pas. Espère que j'ai aidé quelqu'un aujourd'hui!

les largeurs de réglage explicitement en utilisant sWidth pour chaque colonne et bAutoWidth: false dans dataTable l'initialisation a résolu mon problème (similaire). L'amour le débordement de la pile.

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

cela fonctionnait très bien pour ajuster toute la largeur de la table. Merci @Peter Drinnan!

comme sur le Datatable 10.1, c'est simple. Il suffit de mettre l'attribut width à votre table en HTML. c.-à-d. width="100%", cela aura priorité sur tous les styles CSS définis par DT.

voir ce http://www.datatables.net/examples/basic_init/flexible_width.html

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

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

aucune des solutions ici n'a fonctionné pour moi. Même l'exemple sur la page d'accueil des datatables ne fonctionnait pas donc à 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 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 eu exactement le même problème que vous, bien que j'étais juste appliquer JQuery à une table normale sans aucun Ajax. Pour une raison quelconque, Firefox n'étend pas la table après l'avoir révélé. J'ai réglé le problème en plaçant la table dans une DIV, et en appliquant les effets à la DIV à la place.

faites-vous cela dans l'événement ready?

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

le calibrage dépendra très probablement du chargement complet du document.

pour toute personne ayant des difficultés à ajuster la largeur de la table / cellule en utilisant le plugin d'en-tête fixe:

Datatables s'appuie sur les tags thead pour les paramètres de largeur de colonne. C'est parce que c'est vraiment le seul html natif que la plupart du html interne de la table est auto-générée.

cependant, ce qui se produit est une partie de votre cellule peut être plus grande que la largeur stockée à l'intérieur des cellules thead.

i. e. si votre table a un grand nombre de colonnes (table large) et vos lignes ont beaucoup de données, puis appeler "sWidth": pour changer la taille de la cellule td ne fonctionnera pas correctement parce que les lignes d'enfant redimensionnent automatiquement td basé sur le contenu de débordement et cela se produit après la table a été initialisée et passé ses paramètres d'initialisation.

the original thead "sWidth": parameter get overridden (shrunk) because datatables pense que votre table a encore sa largeur par défaut de %100--it ne pas reconnaître que certaines cellules sont remplies.

pour corriger ceci j'ai calculé la largeur de débordement et je l'ai comptabilisé en redimensionnant la table en conséquence après la table a été initialisée--pendant que nous y sommes nous pouvons init notre en-tête fixe en même temps:

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

créer votre fixedheader à l'intérieur du "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 ça aidera quelqu'un qui est encore en difficulté.

ne gardez pas votre table à l'intérieur d'un contenant. Le tableau emballage de votre conteneur d'après le tableau du rendu. Je sais que cela pourrait être invalide à des endroits où vous avez quelque chose d'autre avec la table mais alors vous pourriez toujours ajouter que le contenu en arrière.

pour moi, ce problème se pose si vous avez une barre latérale et un conteneur qui est en fait un offset à cette barre latérale.

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

(j'ai ajouté un panel-par défaut)

Et votre classe:

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

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

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

tableaux de données-largeur de la force

j'ai rencontré un problème similaire quand avoir un div enroulé autour de la table.

ajouter la position: relative l'a fixé 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 de table et le pied de page. Ajouter un div autour de la table et régler x-overflow semble avoir trié cette question:

assurez-vous que tous les autres paramètres avant bAutoWidth & aoColumns sont correctement entrés.Tout paramètre erroné avant cassera cette fonctionnalité.

j'ai eu le même problème et j'ai trouvé que le texte dans les colonnes ne se cassent pas et en utilisant ce code css résolu le problème

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

C'est ma façon de 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();
    }
});

ça marche très bien.

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