CODEWITHSUNDEEP
jqueryhtml-table
Galfau
Galfau

Reputation: 82

jQuery datatable ignores rows with colspan

I have a table that looks like this:

EDITED:

<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>

Note: Clicking on the id number, show/hide the detail row.

I am having problems when dataTable try to render the table with the colspan, i get this error

Uncaught TypeError: Cannot read property 'asSorting' of undefined

If I remove the detail rows, datatable renders everything fine.

What i want to know if it is possible to tell dataTable to ignore details rows as described above.

Upvotes: 2

Views: 12059

Answers (3)

mArtinko5MB
mArtinko5MB

Reputation: 788

I recommend to use this solution direct from datatable

DataTables hidden row details example

works great

Upvotes: 5

krishwader
krishwader

Reputation: 11381

I read through the documentation of Datatable and it looks like doesnt support colspan as of now.

You might want to look at these links. They provide alternatives to colspans. This seems to be quite cumbersome, agreed, but as of now, there's no other go.

Datatables forum link

SO link for a similar kind of question

Edit :

On reading more, i found this : This discusses on how colspan and sowspan can be used for grouping. Maybe you could look more at that.

And ensure that you're using the latest version of the plugin.

Upvotes: 1

Pavel Zastavnitskiy
Pavel Zastavnitskiy

Reputation: 117

Add to your css:

.hide {
    display: none;
}

and to onclick handler:

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

Upvotes: 0

Related Questions