Make ScrollY dynamic?

Make ScrollY dynamic?

pejspapejspa Posts: 3Questions: 2Answers: 0
edited July 2020 in Free community support

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

Answers

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954

    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

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    See also this blog post which is about this topic.

    Allan

  • pejspapejspa Posts: 3Questions: 2Answers: 0
    edited November 2020

    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,

This discussion has been closed.