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

Brock · Accepted Answer · 2014-06-27 15:52:29Z

6

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

answered Jun 27, 2014 at 15:52

Brock

1,6553 gold badges18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mpsbhat Over a year ago

How to fix this: stackoverflow.com/questions/26436791/…

Frank Over a year ago

For me once I use fixedColumns.destroy(); I can't re-create them.

Ramy Nasr · Accepted Answer · 2014-05-16 17:13:51Z

1

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

this.table.draw()

answered May 16, 2014 at 17:13

Ramy Nasr

2,55723 silver badges25 bronze badges

3 Comments

Brock Over a year ago

fixedColumns.fnUpdate() does that, and it doesn't work. I had to code the destroy method to the plugin, will post my self-answer soon.

FajitaNachos Over a year ago

@Brock Did you ever find a working solution? I'm having a hard time going from 0 to 1 as well as 1 to 0 when dynamically updating the number of fixed columns

Brock Over a year ago

Refer to the answer I've posted

dykstrad · Accepted Answer · 2014-06-19 22:14:41Z

1

It worked for me when I did the following:

Set leftColumns and iLeftColumns
call fnUpdate()
call fnRedrawLayout()

Hope this helps.

EDIT: fnRedrawLayout() already calls fnUpdate() so...

Set leftColumns and iLeftColumns
Call fnRedrawLayout()

edited Jun 19, 2014 at 22:14

answered Jun 18, 2014 at 21:47

dykstrad

3983 silver badges10 bronze badges

3 Comments

Brock Over a year ago

Yes, this is very close to what I've ended up with.

dykstrad Over a year ago

@Brock I am finding my solution isn't complete, what did you end up with? I am running into a problem going from 1 fixed column to 0 or 0 fixed columns to 1.

Brock Over a year ago

I've had to extend fixedColumns plugin with a 'destroy' method. In this method I'm deleting all clones plugin has created and switching off all event handlers it assigned.

Eliotjse · Accepted Answer · 2017-05-25 07:09:18Z

0

var table = $(".your table class name")["1"]
var tableClone = $(".your table class name")["3"]
table.children["1"].children[currentRowId].remove();
tableClone.children["1"].children[currentRowId].remove();

I hope this will help you. It will not slow down the performance as it is directly trying to remove the rows from your table.

answered May 25, 2017 at 7:09

Eliotjse

1191 silver badge15 bronze badges

Collectives™ on Stack Overflow

jQuery DataTables fixedColumns remove fixed columns dynamically

4 Answers 4

2 Comments

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related