Question

我知道要使用dataTables plugin来切换列中的可见性，我只需这样做：

function fnShowHide( iCol ){
    /* Get the DataTables object again - this is not a recreation, just a get of the object */
    var oTable = $('#content-table-redesign').dataTable();

    var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
    oTable.fnSetColumnVis( iCol, bVis ? false : true );
}

但是可以使用ID或Class或其他方法获取列吗？

问题是我也允许用户将列拖放到将来，如果我按索引进行，那么他们可能会点击隐藏“id”（第0列），但他们将其移动到其他地方，现在无论如何在0位置隐藏而不是“id”。

或者以某种方式欺骗插件仍然链接列索引，无论它移动到何处。

修改

这里的HTML主体基本相同（每个td与其父级具有相同的类）

 <table id="content-table-redesign" class="display">
            <thead>
                <tr>
                    <th class="ID">ID</th>
                    <th class="Name">Name</th>
                    <th class="Domain">Domain</th>
                    <th class="email">email</th>
                </tr>
            </thead>
            <tbody>

我正在寻找这个类，因为包含该类的那个类将被删除thead和tbody一样

Answer 1

我认为最简单的答案就是dataTables本身不支持这种情况，并且您需要自己手动提取基于类的索引。幸运的是，这很容易！

var iCol = $('#content-table-redesign tr').first().children('td.yourclass').index();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );

当然，您的选择器可能需要使用th.yourclass，具体取决于您的表格结构。所以它可能会改为：

$('#content-table-redesign thead tr').children('th.yourclass').index();

<强>更新

根据您的HTML，这是您的选择器：

$('#content-table-redesign thead tr').children('th.ID').index();

您会注意到控制台记录“0”：http://jsfiddle.net/YeAHB/

Answer 2

使用最新版本的DataTables，您可以指定类名并显示/隐藏列。

var data_table = $('#data-table').DataTable();
data_table.columns('.location-col').visible(true);

希望这有帮助。

Answer 3

我从来没有使用过这个插件，但是根据html结构，你可以使用jQuery .index（）来查找孩子的索引...

看看这个小提琴：

http://jsfiddle.net/UwQ35/

使用dataTables中的类切换列可见性

3 个答案: