Question

我有桌子：

HTML

<table id="mydata">
    <thead>
        <tr>
            <th>Data 1</th>
            <th>Data 2</th>
            <th>Data 3</th>
            <th>Data 4</th>
        </tr>
    </thead>
    <tbody>
        <tr class="main">
            <td class="data_1">A</td>
            <td class="data_2">B</td>
            <td class="data_3">C</td>
            <td class="data_4">D</td>
        </tr>
   </tbody>
</table>

当我使用dataTable进行jquery排序时：

的JavaScript

jQuery('#mydata').dataTable({
    "sDom": " ",
    "bPaginate": false,
    "bInfo": false,
    'bFilter':false,                        
    "aoColumns": [
        null,               
        null,
        null,
        null
    ]
});

它奏效了。

但是，当我为 main 添加子行时：

HTML

<table id="mydata">
    <thead>
        <tr>
            <th>Data 1</th>
            <th>Data 2</th>
            <th>Data 3</th>
            <th>Data 4</th>
        </tr>
    </thead>
    <tbody>
        <tr class="main">
            <td class="data_1">A</td>
            <td class="data_2">B</td>
            <td class="data_3">C</td>
            <td class="data_4">D</td>
        </tr>

        <tr class="detail-header">
            <td><strong>A1</strong></td>
            <td><strong>B1</strong></td>
            <td><strong>C1</strong></td>
            <td><strong>D1</strong></td>
        </tr>
        <tr class="detail">
            <td><strong>A2</strong></td>
            <td><strong>B2</strong></td>
            <td><strong>C2</strong></td>
            <td><strong>D2</strong></td>
        </tr>
        <tr class="control">
            <td colspan="2"><a href="#">Show details</a></td>
            <td colspan="2"><a href="#">Hide details</a></td>
        </tr>
    </tbody>
</table>

在该html中：详细信息标题，详细信息和控制是主要的孩子，他们会在什么时候显示点击显示详细信息，它应该在排序时忽略但我似乎也按dataTable排序，所以我收到错误：

Uncaught TypeError: Cannot read property 'className' of undefined

Answer 1

dataTables not accept colspans in <tbody>。将最后一行（带链接的行）放在<tfoot>中：

<tfoot>
    <tr class="control">
        <td colspan="2"><a href="#">Show details</a></td>
        <td colspan="2"><a href="#">Hide details</a></td>
    </tr>
</tfoot>

演示 - ＆gt;的 http://jsfiddle.net/71zcn578/

未捕获的TypeError：无法读取属性＆＃39; className＆＃39;未定义的dataTable

1 个答案: