How to unlock freezed columns when screen width changes

renato78

Hello everyone,
this Is my first post in this forum
for my table, I did this script:

jQuery(document).ready( function () {
    var table = jQuery('#my_table').DataTable({
        language: {
                url: "https://cdn.datatables.net/plug-ins/1.12.1/i18n/it-IT.json"
            },
        columnDefs: {
              className: "dt-head-center"
            },
        scrollX:        true,
        responsive: true,
        fixedColumns:   {
            left: 3,
            right: 0
        },
        
        initComplete: function () {
            this.api()
                .columns()
                .every(function () {
                    var column = this;
                    var select = jQuery('<select><option value=""></option></select>')
                        .appendTo(jQuery(column.footer()).empty())
                        .on('change', function () {
                            var val = jQuery.fn.dataTable.util.escapeRegex(jQuery(this).val());
 
                            column.search(val ? '^' + val + '$' : '', true, false).draw();
                        });
 
                    column
                        .data()
                        .unique()
                        .sort()
                        .each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>');
                        });
                });
        },
        
    });
} );

As you can see, I freezed first 3 columns.
This script works fine for screen or orientation that has "width >= 1200px".
I would like to unlock all columns when "width < 1200px".
I would like do it also during resize.

Which is the right way?
Thanks to all.

kthorngren

You can try /fixedColumns().left() with the value of 0 when the page size is what you want.

Kevin

renato78

Hello,
thanks for your help.
For try your suggestion, I added this code before "document ready" close:

table.fixedColumns().left(1);

I expected the value of the fixed columns on the left to change from 3 to 1.
Unfortunately I was wrong.

what is the right syntax that I should use?
Thank you all.

kthorngren

I think it has to do with the asynchronous loading of the language option. Datatables hasn't completed initialization when you execute table.fixedColumns().left(1);. See this test case:
http://live.datatables.net/sufuwuwe/1/edit

If you remove the language option it works. You can place the fixedColumns.adjust() in initComplete to have it work with language. Or, for testing create a button the executes fixedColumns.adjust().

Kevin

renato78

Hello,
I fixed the script to make it final.
I post the whole script hoping that it will be of help to those who will have to face the same problem:

jQuery(document).ready( function () {
    var win = jQuery(this); //this = window
    if (win.width() >= 1200) 
    {
        var fixed_on_left = 3;
    }
    else
    {
        var fixed_on_left = 0;
    }
    var table = jQuery('#my_table').DataTable({
        
        language: {
                url: "https://cdn.datatables.net/plug-ins/1.12.1/i18n/it-IT.json"
            },
        
        columnDefs: {
              className: "dt-head-center"
            },
        scrollX:        true,
        responsive: true,
        fixedColumns:   {
            left: fixed_on_left,
            right: 0
        },
        
        initComplete: function () {
            this.api()
                .columns()
                .every(function () {
                    var column = this;
                    var select = jQuery('<select><option value=""></option></select>')
                        .appendTo(jQuery(column.footer()).empty())
                        .on('change', function () {
                            var val = jQuery.fn.dataTable.util.escapeRegex(jQuery(this).val());
 
                            column.search(val ? '^' + val + '$' : '', true, false).draw();
                        });
 
                    column
                        .data()
                        .unique()
                        .sort()
                        .each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>');
                        });
                })
                .fixedColumns().relayout();
                
        }, 
        
    });
    
    jQuery(window).on('resize', function(){
        var win = jQuery(this); //this = window
        if (win.width() >= 1200) 
        {
            table.fixedColumns().left('3');
        }
        else
        {
            table.fixedColumns().left('0');
        }
    });
});

I tried using ".fixedColumns().adjust();" in several ways, without achieving the desired behavior.
Finally I tried with ".fixedColumns().Relayout();" and it worked on the first try.
I don't know if what I've found is the ideal solution to manage the number of blocked columns based on the width of the browser window/device width.
What do you think?

allan

Hi,

Just following up on this - fixedColumns().relayout() is a method from v3.3.3 and before. It was removed in v4 as it is no longer needed

Have you tried v4? It should make a lot of things much easier.

Allan