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>

注意：点击身份证号码，显示/隐藏详细信息行。

当dataTable尝试使用colspan渲染表时遇到问题，我收到此错误

Uncaught TypeError: Cannot read property 'asSorting' of undefined

如果我删除详细信息行，则数据表可以使一切正常。

如果可以告诉dataTable忽略上面描述的详细信息行，我想知道。

Answer 1

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

DataTables hidden row details example

效果很好

Answer 2

我阅读了Datatable的文档，截至目前看起来并不支持colspan。

您可能希望查看这些链接。它们提供了colspans的替代方案。这似乎是非常麻烦，同意，但截至目前，没有其他的去。

Datatables forum link

SO link for a similar kind of question

修改：

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

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

Answer 3

添加到您的css：

.hide {
    display: none;
}

和onclick处理程序：

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

jQuery数据表忽略了使用colspan的行

3 个答案: