javascript - Uncaught TypeError: Cannot read property 'className' of undefined dataTable - Stack Overflow

admin管理员组

文章数量:1332403

I have table:

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>

When i'm using dataTable to sort with jquery:

JavaScript

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

It's worked.

But, when i add child rows for 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>

In that html: detail-header, detail and control are childs of main and they show when click to Show details, it's should ignore when sort but i seem they also sort by dataTable so i received error:

Uncaught TypeError: Cannot read property 'className' of undefined

I have table:

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>

When i'm using dataTable to sort with jquery:

JavaScript

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

It's worked.

But, when i add child rows for 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>

In that html: detail-header, detail and control are childs of main and they show when click to Show details, it's should ignore when sort but i seem they also sort by dataTable so i received error:

Uncaught TypeError: Cannot read property 'className' of undefined

• javascript
• jquery
• jquery-plugins
• datatables

Share Improve this question Follow edited Aug 22, 2014 at 7:09 Eugene Obrezkov 2,99622 gold badges1818 silver badges3535 bronze badges asked Aug 22, 2014 at 6:56 rockyrocky 33944 gold badges99 silver badges2121 bronze badges 3

• detail-header, detail and control are not childs of main, they are sibblings of main. Did you expect tbody to be main? – wallop Commented Aug 22, 2014 at 7:00
• yeah, i'm confused. I want datatable just sort with main, and detail-header, detail and control will depend on results is sorted. – rocky Commented Aug 22, 2014 at 7:11
• oh now i get it. You need to check the data table plugin if it allows to sort any particular row!!! – wallop Commented Aug 22, 2014 at 7:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

dataTables does not accept colspans in <tbody>. Place the last row (the row with links) in a <tfoot> instead :

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

demo -> http://jsfiddle/71zcn578/

本文标签： javascriptUncaught TypeError Cannot read property 39className39 of undefined dataTableStack Overflow