Question

我在fixedColumns组件中使用DataTables插件。我希望允许用户从表头中切换固定列。

创建固定列是向前的：

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

我想知道，我怎样才能更改创建的fixedColumns，或者如果我不能，就是这样，因为我尝试更新iLeftColumns选项并执行fnUpdate但没有效果：

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

Answer 1

正如上面的dykstrad所说，为了更改固定的列数，您可以使用iLeftColumns设置，如下所示：

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

然而，使用这种方法删除固定列是不可能的，因为你需要隐藏覆盖插件一起生成或销毁实例，我决定销毁它，所以我用这个扩展了插件：

$.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;
};

使用此方法删除并重新应用很简单：

fixedColumns.destroy();

然后从一开始就是：

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

Answer 2

您可能需要做的是在进行更改后重绘表：

this.table.draw()

Answer 3

当我做以下事情时，它对我有用：

设置leftColumns和iLeftColumns
调用fnUpdate（）
调用fnRedrawLayout（）

希望这有帮助。

编辑： fnRedrawLayout（）已经调用了fnUpdate（），所以......

设置leftColumns和iLeftColumns
调用fnRedrawLayout（）

Answer 4

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

我希望这会对你有所帮助。它不会降低性能，因为它直接尝试从表中删除行。

jQuery DataTables fixedColumns动态删除固定列

4 个答案: