How to show columns after DTs ajax request

theAnimalix

Hey,

As far as I know DT doesn't support dynamically showing/hiding columns, so I started looking into a solution on my own.

I've tried custom ajax request and initializing table after that request, but I don't like that solution, since table is not displayed until the request is complete and table initialized.

That's why I've started implementing the solution via DTs ajax complete method (I've read that success one is used by DT and shouldn't be used). I'm able to intercept the data but I'm not able to show columns again once they were hidden via 'never' class. I've tried by setting table.colum(x).visible to true (I guess it doesn't work because I use classes) and also setting header class to 'none' without success. I've even tried to call table.draw at the end but it didn't work. Any suggestion how to get this working (for responsive table, where come columns could also be collapsed)?

theAnimalix

I guess I should read documentation more. :) I've solved that by adding "table.responsive.rebuild()" and "table.responsive.recalc()". Here is my solution for showing columns based on ajax data and default DT init:

var tableColumnsRendered = false;
...
$('#example').DataTable({
        ...        
        ajax: {
            url:'../url',
            type:'POST',
            complete: function(response) {
                ...
                //show columns that were initially hidden
                if(!tableColumnsRendered){
                    $.each(response.responseJSON.tableColumns, function (index, value) {
                        $(table.column(index).header()).removeClass('never').addClass(value);
                    });
                    table.responsive.rebuild();
                    table.responsive.recalc();
                    tableColumnsRendered = true;
                }
            }
        },