Comment changer dynamiquement jQuery Datatables hauteur

J'utilise jQuery Datatables . Je souhaite changer la hauteur de la table chaque fois qu'un utilisateur redimensionne la fenêtre. Je peux saisir l'événement de redimensionnement de la fenêtre qui me permet de calculer la nouvelle hauteur. Comment puis-je affecter la nouvelle hauteur à l'objet dattable?

Vous pouvez utiliser le code suivant:

var calcDataTableHeight = function() { return $(window).height() * 55 / 100; }; var oTable = $('#reqAllRequestsTable').dataTable({ "sScrollY": calcDataTableHeight(); }); $(window).resize(function() { var oSettings = oTable.fnSettings(); oSettings.oScroll.sY = calcDataTableHeight(); oTable.fnDraw(); });

La réponse actuelle ne m'a pas fonctionné (en utilisant v 1.9.1). Je pense que cette solution fonctionne non seulement, mais elle fonctionnera mieux ( et est basée sur la suggestion de l'auteur ). Cet exemple utilise smartresize pour résoudre les problèmes de ré-taille de la fenêtre du navigateur.

 var defaultOptions = {...};//your options var calcDataTableHeight = function() { //TODO: could get crazy here and compute (parent)-(thead+tfoot) var h = Math.floor($(window).height()*55/100); return h + 'px'; }; defaultOptions.sScrollY = calcDataTableHeight(); var oTable = this.dataTable(defaultOptions); $(window).smartresize(function(){ $('div.dataTables_scrollBody').css('height',calcDataTableHeight()); oTable.fnAdjustColumnSizing(); });

Il suffit de le dire comme ceci:

 $('#example').dataTable({ "sScrollY": "auto" });

À l'aide de nouvelles versions de Datatables, il existe d'autres méthodes qui, combinées à l'utilisation judicieuse d'une minuterie pour regarder les déclencheurs de l'événement de redimensionnement, fonctionnent très bien. J'ai quitté la ligne "old" "window.location.reload ()" pour ceux qui sont bloqués en cours d'exécution de versions anciennes de DataTables – il suffit de faire un commentaire et de commenter l'appel "table.draw ()".

Note latérale, la documentation indique que l'appel correct est "table.Draw ()" – ce n'est pas le cas sur la version que j'utilise (l'appel est en minuscule).

 $(window).on('resize', function(e) { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { // Get table context (change "TABLENAME" as required) var table = $('#TABLENAME').DataTable(); // Set new size to height -100px $('.dataTables_scrollBody').css('height', window.innerHeight-100+"px"); // Force table redraw table.draw(); // Only necessary for ancient versions of DataTables - use INSTEAD of table.draw() // window.location.reload(); }, 250); // Timer value for checking resize event start/stop });

C'est tout.

Pour DataTables 1.10 :

  $("#table").DataTable( { scrollY: '250px', scrollCollapse: true, paging: false, }); $('#table').closest('.dataTables_scrollBody').css('max-height', '500px'); $('#table').DataTable().draw();

Lorsque vous avez modifié CSS, vous devez appeler draw() .

C'est un travail pour moi

 $(document).ready(function () { $('#dataTable1').dataTable({ "scrollY": 150, "scrollX": 150 }); $('.dataTables_scrollBody').height('650px'); });

Je pense que vous pouvez changer la hauteur de la table par css

 $(window).resize(function(){ $('#yourtable').css('height', '100px'); });