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

score 6 · Accepted Answer · answered Jun 27 '14 at 15:52

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

How to fix this: http://stackoverflow.com/questions/26436791/prevent-the-jquery-datatable-to-restore-to-initial-state-when-clicking-the-toggl?noredirect=1#comment41562339_26436791 — mpsbhat, Oct 20 '14 at 11:01
For me once I use ```fixedColumns.destroy();``` I can't re-create them. — Frank, Jul 06 '21 at 15:04

score 1 · Answer 2 · answered May 16 '14 at 17:13

1

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

this.table.draw()

answered May 16 '14 at 17:13

Ramy Nasr

2,367
20
24

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. – Brock May 19 '14 at 10:08
@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 – FajitaNachos Jun 25 '14 at 20:53
Refer to the answer I've posted – Brock Jun 27 '14 at 15:54

dykstrad · Answer 3 · 2014-06-19T22:14:41.173

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 '14 at 22:14

answered Jun 18 '14 at 21:47

dykstrad

398
3
10

Yes, this is very close to what I've ended up with. – Brock Jun 19 '14 at 09:56
@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. – dykstrad Jun 20 '14 at 14:30
1

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. – Brock Jun 23 '14 at 15:43

score 0 · Answer 4 · answered May 25 '17 at 07:09

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.

jQuery DataTables fixedColumns remove fixed columns dynamically

4 Answers4