How to remove fixed column after initializing in jquery?

Aravindkumar

Am using fixed column in datatable, after ajax completed am initializing datatable, but on button click I need to remove fixed column from data table. I have tried many methods but no use. If any suggestion plz tell. Advance thanks..

heartdisk

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

I also tried it's working fine for me
http://stackoverflow.com/questions/23700623/jquery-datatables-fixedcolumns-remove-fixed-columns-dynamically

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

You can alter the visibility of the fixed columns, but currently there is no way to dynamically add and removed columns from the fixed part. You need to destroy the table and then recreate it as @heartdisk suggests.

It might be possible in a future update to do it dynamically, but it isn't something I'm prioritizing development of at the moment I'm afraid.

Allan

Aravindkumar

Thanks allan and Heartdisk..

Aravindkumar

Hello Allan, One more Doubt. Is there any possible to expand data table from normal div to whole page (For example: youtube video expanding.)? Is that possible in data table?

allan

It isn't something that is built into DataTables, but there is no reason why you shouldn't be able to change the position and size of an element that contains a DataTable.

Allan