web-dev-qa-db-fra.com

Comment modifier dynamiquement la hauteur des tables de données jQuery

J'utilise jQuery Datatables . Je souhaite modifier la hauteur de la table chaque fois qu'un utilisateur redimensionne la fenêtre. Je suis capable d'attraper l'événement de redimensionnement de la fenêtre qui me permet de calculer la nouvelle hauteur. Comment attribuer la nouvelle hauteur à l'objet datatable?

javascriptjquerydatatables
17
xyz

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();
});
30
Raje

La réponse actuelle n'a pas fonctionné pour moi (en utilisant la version 1.9.1). Je pense que cette solution fonctionne non seulement mais fonctionnera mieux ( et est basée sur la suggestion de l'auteur ). Cet exemple utilise smartresize pour résoudre les problèmes de redimensionnement des fenêtres multi-navigateurs.

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();
});
8
rynop

En utilisant des versions plus récentes des tables de données, il existe d'autres méthodes qui, combinées à l'utilisation judicieuse d'une minuterie pour regarder les déclencheurs d'événement de redimensionnement, fonctionnent plutôt bien. J'ai laissé la ligne "antique" "window.location.reload ()" pour ceux qui sont bloqués en utilisant des versions plus anciennes de DataTables - simplement commentez-la et commentez l'appel "table.draw ()".

Remarque, 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 tout en minuscules).

$(window).on('resize', function(e) 
{
  if (typeof resizeTimer !== 'undefined') {
    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.

5
Robert Mauro

Pour DataTables 1.1:

            $("#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().

4
Nikolay Makhalin

Mettez-le simplement comme ceci:

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

C'est du travail pour moi

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