jQuery DataTables fixedColumns remove fixed columns dynamically

Question

I'm using fixedColumns plugin for my DataTables component. And I want to allow users to toggle fixed columns from the table header.

Creating the fixed columns is straign forward:

this.table.fixedColumns = new $.fn.dataTable.FixedColumns(this.table, {
    iLeftColumns: index + 1
});

I wonder, how can I change the fixedColumns created, or if I can't, that seems like the case, cause I tried updating iLeftColumns option and doing fnUpdate but had no effect:

this.table.fixedColumns.s.iLeftColumns = 0;
this.table.fixedColumns.fnUpdate();

Answer 1

As was answered by dykstrad above to change the number of columns fixed you can use iLeftColumns setting, like this:

var fixedColumns = new $.fn.dataTable.FixedColumns(this.table, {
    iLeftColumns: 1
});
fixedColumns.s.iLeftColumns = 3;
fixedColumns.fnRedrawLayout();

However removing fixed columns is impossible with this method, for that you need to hide the overlay plugin produces or destroy the instance all together, I've decided to destroy it, so I've extended the plugin with this:

$.fn.dataTable.FixedColumns.prototype.destroy = function(){
    var nodes = ['body', 'footer', 'header'];

    //remove the cloned nodes
    for(var i = 0, l = nodes.length; i < l; i++){
        if(this.dom.clone.left[nodes[i]]){
            this.dom.clone.left[nodes[i]].parentNode.removeChild(this.dom.clone.left[nodes[i]]);
        }
        if(this.dom.clone.right[nodes[i]]){
            this.dom.clone.right[nodes[i]].parentNode.removeChild(this.dom.clone.right[nodes[i]]);
        }
    }

    //remove event handlers
    $(this.s.dt.nTable).off( 'column-sizing.dt.DTFC destroy.dt.DTFC draw.dt.DTFC' );

    $(this.dom.scroller).off( 'scroll.DTFC mouseover.DTFC' );
    $(window).off( 'resize.DTFC' );

    $(this.dom.grid.left.liner).off( 'scroll.DTFC wheel.DTFC mouseover.DTFC' );
    $(this.dom.grid.left.wrapper).remove();

    $(this.dom.grid.right.liner).off( 'scroll.DTFC wheel.DTFC mouseover.DTFC' );
    $(this.dom.grid.right.wrapper).remove();

    $(this.dom.body).off('mousedown.FC mouseup.FC mouseover.FC click.FC');

    //remove DOM elements
    var $scroller = $(this.dom.scroller).parent();
    var $wrapper = $(this.dom.scroller).closest('.DTFC_ScrollWrapper');
    $scroller.insertBefore($wrapper);
    $wrapper.remove();

    //cleanup variables for GC
    delete this.s;
    delete this.dom;
};

With this method on board removing and reapplying is simple:

fixedColumns.destroy();

and then from the very beginning:

var fixedColumns = new $.fn.dataTable.FixedColumns(this.table, {
    iLeftColumns: 3
});

Answer 2

Maybe what you need to do is to redraw the table after making the change:

this.table.draw()