jQuery DataTables固定列动态移除

Question

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

创建固定列很简单：

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

- Brock

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

- Brock

---

如何修复这个问题：http://stackoverflow.com/questions/26436791/prevent-the-jquery-datatable-to-restore-to-initial-state-when-clicking-the-toggl?noredirect=1#comment41562339_26436791 - mpsbhat

对我来说，一旦使用了fixedColumns.destroy();，我就无法重新创建它们。 - Frank

Answer 2

当我按照以下步骤操作时，它对我有效：

1. 设置leftColumns和iLeftColumns
2. 调用fnUpdate()
3. 调用fnRedrawLayout()

希望这可以帮到你。

---

编辑： fnRedrawLayout() 已经调用了 fnUpdate()，所以...

1. 设定 leftColumns 和 iLeftColumns
2. 调用 fnRedrawLayout()

- dykstrad

---

是的，这非常接近我最终得出的结果。 - Brock

@Brock，我发现我的解决方案不完整，你最终得出了什么结论？我遇到了一个问题，从1个固定列转换为0个或从0个固定列转换为1个。 - dykstrad

我不得不通过添加一个“destroy”方法来扩展fixedColumns插件。在这个方法中，我将删除插件创建的所有克隆对象，并关闭它所分配的所有事件处理程序。 - Brock

Answer 3

也许你需要在修改后重新绘制表格：

this.table.draw()

- Ramy Nasr

---

fixedColumns.fnUpdate()就是这样，但它不起作用。我不得不编写销毁方法到插件中，很快会发布我的自我答案。 - Brock

@Brock 你找到可用的解決方案了嗎？當動態更新固定列數時，我也很難從 0 轉到 1，以及從 1 轉到 0。 - FajitaNachos

请参考我发布的答案。 - Brock

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

我希望这可以帮到你。它不会影响性能，因为它直接尝试从表中删除行。

- Eliotjse