Where Do I Call columns.adjust()

seanhassett

I have tables that are hidden and so I'm having the problem where the columns aren't sized properly when they appear. From looking through the forums I thinkI need to call table.columns.adjust() when the table is made visible but I'm not 100% on how to do that. My knowledge of JQuery is basic to the point of being non-existent.

I have seen examples of calling adjust() on tables hidden by Bootstrap Tabs but I am using a dropdown menu to select the tables so it's a little different.

This is the code I have that initialises the DataTables and controls which one is displayed. Can someone advise me as to how I should call the adjust() function? I tried making a var table under var show and calling the function on that but I must be doing something wrong.

$(document).ready(function() {
    $('table.display').DataTable( {
        "paging":   false,
        "searching": false,
        "bInfo": false,
        "scrollY": "300px",
        "bScrollCollapse": true
    });
});

$(document).on('change', '.form-control', function() {
    var target = $(this).data('target');
    var show = $("option:selected", this).data('show');
    $(target).children().addClass('hide');
    $(show).removeClass('hide');
});

$(document).ready(function() {
    $('.form-control').trigger('change');
});

And this is the HTML for the dropdown menu:

<select class="form-control" title="Analysis View" data-target=".table-view">

bindrid

right after you show your table for the first time.

seanhassett

Ok, got it to work by putting it in right after $(show).removeClass('hide'); There is an issue with PyCharm not recognising .adjust() as a valid method which was putting me off but it works fine now. This can be closed.

allan

The columns.adjust() method should be called when the table is visible in the DOM. At that point it has height and width and can be used for dimensioning calculations by DataTables.

Thanks for posting back - good to hear you have it working now.

Allan