jquery - jQuery 数据表忽略带有 colspan 的行

Question

我有一个看起来像这样的表：

编辑：

<table id="results">
<thead>
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>NUMBER</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><a href="#" onclick="$('#user_1').toggle();">1</a></td>
        <td>JOHN</td>
        <td>311-123-4523</td>
    </tr>
    <tr id="user_1" class="hide">
        <td colspan="3">
        Some information about the user
        </td>
    </tr>
</tbody>    
</table>

<script>
    $(document).ready(function(){
        $('#results').dataTable({
            "sPaginationType": "bootstrap"
        });
    });
</script>

注意：单击 id 号，显示/隐藏详细信息行。

当 dataTable 尝试使用 colspan 呈现表时出现问题，我收到此错误

Uncaught TypeError: Cannot read property 'asSorting' of undefined 

如果我删除详细信息行，数据表会呈现一切正常。

我想知道是否可以告诉 dataTable 忽略上述详细信息行。

Answer 1

我建议直接从数据表中使用此解决方案

DataTables 隐藏行详细信息示例

效果很好

Answer 2

我通读了 Datatable 的文档，它看起来colspan现在不支持。

您可能想查看这些链接。它们提供了colspans. 这似乎很麻烦，同意，但到目前为止，没有其他办法了。

数据表论坛链接

类似问题的SO链接

编辑 ：

在阅读更多内容时，我发现了这一点：这讨论了如何使用 colspan 和 sowspan 进行分组。也许你可以多看一点。

并确保您使用的是最新版本的插件。

Answer 3

添加到您的CSS：

.hide {
    display: none;
}

和 onclick 处理程序：

$('#user_1').toggleClass('hide');