Redimensionnement à la volée des données

Question

Je suis en utilisant le merveilleux DataTables plug-in jQuery; http://datatables.net/ Ajoutée le FixedColumns et KeyTable extras.

Maintenant, le tableau n'redimensionner joliment lorsque la taille de la fenêtre est modifiée. Cependant, la div contenant de la table peut également être redimensionnée en largeur par une animation jQuery, et je n'ai pas trouvé un moyen de redimensionner le tableau avec elle ... mais elle reste stagnante dans sa largeur d'origine. Seulement si je change la div de largeur dans le code avant de pageload, la table est redimensionnée correctement.

Comment puis-je faire la DataTable redimensionner à la volée en fonction de la largeur de la fenêtre et la div contenant la largeur? Merci à l'avance! :-)

Answer 1

Ce qui se passe est que les tables de données est le réglage de la CSS largeur de la table lorsqu'il est initialisé à une valeur calculée - cette valeur est exprimée en pixels, donc pourquoi ne pas redimensionner avec votre glisser. La raison pour laquelle il n'est de stopper la table et les colonnes (les largeurs de colonne sont également définir) en sautant autour de largeur lorsque vous modifiez la pagination.

Ce que vous pouvez faire pour arrêter ce comportement dans les tables de données est définie de la bAutoWidth paramètre à false.

$('#example').dataTable( {
  "autoWidth": false
} );

Qui arrêtera les tables de données en ajoutant ses calculé largeurs de la table, en laissant votre (probablement) largeur:100% seul et en lui permettant de redimensionner. L'ajout d'une largeur relative aux colonnes serait également aider à arrêter les colonnes de rebondir.

Une autre option qui est intégré dans les tables de données consiste à définir la sScrollX option pour activer le défilement, comme les tables de données permettra de mettre la table pour être sur à 100% de la largeur de la vitesse de défilement du conteneur. Mais vous ne voulez pas vous défiler.

Le préfet solution serait si je pouvais obtenir le CSS largeur de la table (en supposant que l'une est appliquée, c'est à dire 100%), mais sans l'analyse des feuilles de style, je ne vois pas un moyen de le faire (c'est à dire, fondamentalement, je veux $().css('width') pour renvoyer la valeur de la feuille de style, pas de pixel la valeur calculée).

Answer 2

Je sais que c'est vieux, mais je viens de le résoudre avec ceci:

   var update_size = function() {
    $(oTable).css({ width: $(oTable).parent().width() });
    oTable.fnAdjustColumnSizing();  
  }

  $(window).resize(function() {
    clearTimeout(window.refresh_size);
    window.refresh_size = setTimeout(function() { update_size(); }, 250);
  });
 

Answer 3

peut être en retard aussi comme l'autre réponse mais je l'ai fait au début de cette année et la solution que j'ai trouvée utilise css.

     $(window).bind('resize', function () {
        /*the line below was causing the page to keep loading.
        $('#tableData').dataTable().fnAdjustColumnSizing();
        Below is a workaround. The above should automatically work.*/
        $('#tableData').css('width', '100%');
    } );
 

Answer 4

Avez-vous essayé de capturer l'événement div resize et de faire .fnDraw() sur la table de données? fnDraw devrait redimensionner le tableau pour vous

Answer 5

J'ai eu que cela fonctionne comme suit:

D'abord vous assurer que votre dataTable définition de votre aoColumns tableau inclut sWidth données exprimée en % n'est pas fixe en pixels ou en ems. Puis vous assurer que vous avez défini l' bAutoWidth de la propriété d' false Puis ajouter ce petit mais de JS:

update_table_size = function(a_datatable) {
  if (a_datatable == null) return;
  var dtb;
  if (typeof a_datatable === 'string') dtb = $(a_datatable)
  else dtb = a_datatable;
  if (dtb == null) return;

  dtb.css('width', dtb.parent().width());
  dtb.fnAdjustColumSizing();
}

$(window).resize(function() {
  setTimeout(function(){update_table_size(some_table_selector_or_table_ref)}, 250);
});

Fonctionne un régal et ma table de cellules de gérer l' white-space: wrap; CSS (qui ne fonctionnait pas sans réglage de l' sWidth, et a été ce qui m'a amené à cette question.)