web-dev-qa-db-fra.com

Redimensionnement à la volée des données

J'utilise le merveilleux plug-in DataTables jQuery; http://datatables.net/ Ajouté les extras FixedColumns et KeyTable.

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

Comment puis-je redimensionner à la volée le DataTable en fonction de la largeur de la fenêtre et de la largeur du div qui le contient? Merci d'avance! :-)

javascriptjquerydatatables
53
Emphram Stavanger

Ce qui se passe, c’est que DataTables définit la largeur CSS du tableau lorsqu’il est initialisé à une valeur calculée - cette valeur est en pixels, ce qui explique pourquoi elle ne redimensionne pas avec le glissement. La raison pour cela est d’arrêter la table et les colonnes (les largeurs de colonne sont également définies) sautant en largeur lorsque vous modifiez la pagination.

Pour arrêter ce comportement dans DataTables, vous pouvez définir le paramètre autoWidth sur false.

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

Cela empêchera DataTables d'ajouter ses largeurs calculées à la table, laissant votre largeur (supposée): 100% seule et lui permettant de redimensionner. Ajouter une largeur relative aux colonnes aiderait également à empêcher les colonnes de rebondir.

Une autre option intégrée à DataTables consiste à définir l'option sScrollX pour activer le défilement, car DataTables définira le tableau sur une largeur de 100% du conteneur de défilement. Mais vous pourriez ne pas vouloir faire défiler.

La solution idéale serait si je pouvais obtenir la largeur CSS de la table (en supposant qu'une soit appliquée - c'est-à-dire 100%), mais sans analyser les feuilles de style, je ne vois pas de moyen de le faire (c'est-à-dire que je veux $ () .css ('width') pour renvoyer la valeur de la feuille de style, pas la valeur calculée en pixels).

116
Allan Jardine

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

Remarque: cette réponse s'applique à DataTables 1.9

40
Stephen

Cela a fait le tour pour moi.

$('#dataTable').resize()
18
jps
$(document).ready(function() {
    $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
        // var target = $(e.target).attr("href"); // activated tab
        // alert (target);
        $($.fn.dataTable.tables( true ) ).css('width', '100%');
        $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
    } ); 
});

Cela fonctionne pour moi, avec "autoWidth": false,

11
Rui Martins

Vous devriez essayer celui-ci.

var table = $('#example').DataTable();
table.columns.adjust().draw();

Lien: colonne à ajuster dans datatable

8
Chintan Panchal

Utilisation "bAutoWidth": false et reprenons l'exemple donné ci-dessous. Ça marche pour moi.

Exemple:

$('#tableId').dataTable({
 "bAutoWidth": false
});
7
user2314493

peut-être aussi tard que l’autre réponse, mais c’est ce que j’ai fait plus tôt cette année et la solution que j’ai trouvée consiste à utiliser des 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%');
    } );
2
mezzie

J'ai eu le même défi. Lorsque j'ai réduit certains menus que j'avais sur la gauche de mon application Web, le datatable ne pouvait pas être redimensionné. Ajout de "autoWidth": une initialisation erronée a fonctionné pour moi.

$('#dataTable').DataTable({'autoWidth':false, ...});
1
Emmanuel Robert Ssebaggala

Je dois que cela fonctionne comme suit:

Tout d’abord, assurez-vous que dans votre définition dataTable votre tableau aoColumns comprend des données sWidth exprimées sous la forme de pixels non fixés ou ems%. Assurez-vous ensuite que vous avez défini la propriété bAutoWidth sur false. Ajoutez ensuite 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 mes cellules de table gèrent le white-space: wrap; CSS (ce qui ne fonctionnait pas sans régler le sWidth, et c'est ce qui m'a amené à cette question.)

1
Dave Sag

J'avais exactement le même problème que OP. J'avais un DataTable qui ne réajusterait pas sa largeur après une animation jQuery (toogle ("fast")) a redimensionné son conteneur.

Après avoir lu ces réponses, après de nombreuses tentatives d’essais et d’erreurs, c’est pour moi l’essentiel:

  $("#animatedElement").toggle(100, function() {    
    $("#dataTableId").resize();
  });

Après de nombreux tests, j'ai réalisé que je devais attendre que l'animation se termine pour que dataTables calcule la largeur correcte.

1
Alberto Hormazabal

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

1
Keith.Abramo

Le code ci-dessous est la combinaison de la réponse de Chintan Panchal et du commentaire d'Antoine Leclair (placer le code dans l'événement de redimensionnement de windows). (Je n'ai pas eu besoin du rebounce mentionné par Antoine Leclair, mais cela pourrait être une pratique exemplaire.)

  $(window).resize( function() {
      $("#example").DataTable().columns.adjust().draw();
  });

C’est l’approche qui a fonctionné dans mon cas.

1
StackOverflowUser