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

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 或其他方式获取列？

问题是我还允许用户将列拖放到 will，如果我按索引，那么他们可能会点击隐藏“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>

我正在寻找课程，因为包含该课程的课程将被删除

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() 来查找child的索引是什么...

看看这个小提琴：

http://jsfiddle.net/UwQ35/