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();
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
});
Maybe what you need to do is to redraw the table after making the change:
this.table.draw()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With