Datatables redimensionnement à la volée

Je sais que c'est vieux, mais je viens de 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);
  });

Note: Cette réponse s'applique aux DataTables 1.9

Cela a fait l'affaire pour moi.

$('#dataTable').resize()

, Vous devriez essayer celui-ci.

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

Lien: colonne ajuster dans datatable

$(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,

Utilisez "bAutoWidth": false et passez par l'exemple donné ci-dessous. Il est travaillé pour moi.

Exemple:

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

Pourrait ê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%');
    } );

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

Je l'ai fait fonctionner comme suit:

Assurez-vous D'abord que dans votre définition dataTable votre tableau aoColumns inclut des données sWidth exprimées en % de pixels non fixes ou ems. Vérifiez ensuite que vous avez défini la propriété bAutoWidth sur false Puis ajoutez 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 (qui ne fonctionnait pas sans définir le sWidth, et c'est ce qui m'a conduit à cette question.)

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")) redimensionné son conteneur.

Après avoir lu ces réponses, et beaucoup d'essais et d'erreurs, cela a fait l'affaire pour moi:

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

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

Le code ci-dessous est la combinaison de la réponse de Chintan Panchal avec le commentaire D'Antoine Leclair (en plaçant le code dans l'événement de redimensionnement de windows). (Je n'avais pas besoin du rebounce mentionné par Antoine Leclair, mais cela pourrait être une bonne pratique.)

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

C'était l'approche qui a fonctionné dans mon cas.

J'ai eu le même défi. Lorsque j'ai réduit certains menus que j'avais à gauche de mon application web, le datatable ne serait pas redimensionné. Ajout de "autoWidth": l'initialisation de False duirng a fonctionné pour moi.

$('#dataTable').DataTable({'autoWidth':false, ...});