Make ScrollY dynamic?

pejspa

Hi.
I did everything according to the forum tip but when i make:

   page refresh -> everything work greate.

   window resize -> the alert is the same number like page refresh but the table have same size like before. And there is no 
   error in the browser console. 

please help.
thanks

<script> 

        var calcDataTableHeight = function() {
            //alert($(window).height() - $('#topSize').height());
            
            return $(window).height() - $('#topSize').height() - 199;  
        };
     
        
       
    
        $(document).ready(function() {
            var table = $('#datatable').DataTable({
                columnDefs: [{
                        name: "modem", 
                        targets: 0,
                        orderable: false,
                    },{
                        name: "direction", 
                        targets: 1,
                        orderable: false,
                    }, {
                        name: "received", 
                        targets: 2,
                        orderable: true,
                        render: $.fn.dataTable.render.moment('X', 'DD.MM.YYYY HH:mm:ss'),
                    }, {
                        name: "sended", 
                        targets: 3,
                        orderable: false,
                        render: $.fn.dataTable.render.moment('X', 'DD.MM.YYYY HH:mm:ss'),
                    }, {
                        name: "phone", 
                        targets: 4,
                        orderable: false,
                    },{
                        name: "content", 
                        targets: 5,
                        orderable: false,
                }],
                order: [[2, "desc"]],
                serverSide: true,
                ordering: true,
                searching: true,
                ajax: {
                    "url": "{{ path('messages_datatable') }}",
                    "data": {
                        "from": {{ from }},
                        "to": {{ to }}
                    }                    
                },
                destroy: true,

                scrollY: calcDataTableHeight(),
              
                scrollCollapse: true,
                scroller: {
                    loadingIndicator: true,
                },
                initComplete: function(settings, json) {
                    $('.dataTables_scrollBody').slimscroll({
                        wheelStep: 1,
                        height: '100%',
                    });
                },
                dom:"<'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            });
       

            

            $(window).resize(function() {
                var settings = table.settings();
                settings.scrollY = calcDataTableHeight(); 
                table.draw();
            });

kthorngren

I did everything according to the forum tip but when i make:

What forum tip?

Please post a link to your page or a test case replicating the issue. This will allow for interaction with your code to see what its doing.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

allan

See also this blog post which is about this topic.

Allan

pejspa

solved

$(window).resize(function() {
            if (parseInt($('#datatable').css('height')) >= $(window).height() - 200) {
                $('.dataTables_scrollBody').css('height', ($(window).height() - 200));
                $('.dataTables_scrollBody').css('max-height', ($(window).height() - 200));
            }
        });

and in datatable jquery add : scrollY: $(window).height() - 200,