details table disappear when select the details-control

ffrechina

Hi, I have the following problem I hope someone can help me.

I have a master-detail Datatable and when I click to the details-control of a row, the details-table appear but inmediatelly disappears. According to the debugger http://debug.datatables.net/afubit it's correctly seeded with data.

Does anyone know what is happening here?

This is the JS code

var template = Handlebars.compile($("#details-template").html());

            var table = $('#salons-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                pageLength: 5,
                lengthMenu: [5, 10, 20, 40, 100],
                sPaginationType: "bootstrap",
                ajax: 'salons/',
                columns: [
                    {data: null, className: 'details-control', defaultContent: '', orderable: false},
                    {data: 'id', name: 'id', orderable: true},
                    {data: 'name', name: 'name', orderable: false},
                    {data: 'address', name: 'address', orderable: false},
                    {data: 'tax', name: 'tax', orderable: false},
                    {data: 'created_at', name: 'created_at', orderable: true},
                    {data: 'updated_at', name: 'updated_at', orderable: true},
                    {data: 'actions', name: 'actions', orderable: false, searchable: false}
                ]
            });

            // Add event listener for opening and closing details
            $('#salons-table tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                var tableId = 'salons-' + row.data().id;

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    // Open this row
                    row.child(template(row.data())).show();
                    $('#' + tableId).DataTable({
                        processing: true,
                        serverSide: true,
                        responsive: true,
                        pageLength: 5,
                        lengthMenu: [5, 10, 20, 40, 100],
                        sPaginationType: "bootstrap",
                        ajax: row.data().details_url,
                        columns: [
                            { data: 'id', name: 'id', orderable: false},
                            { data: 'name', name: 'name', orderable: false}
                        ]
                    });
                    tr.addClass('shown');
                    tr.next().find('td').addClass('no-padding bg-gray');
                }
            });

and Handlebars' template

 <script id="details-template" type="text/x-handlebars-template">
        <div class="label label-info">Salon @{{ name }}'s Employees</div>
        <table class="table details-table" id="salons-@{{id}}">
            <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
            </thead>
        </table>
    </script>

Thank you!

allan

I don't immediately see the issue I'm afraid. Could you give us a link to a page that shows the issue, or create one using JSFiddle / http://live.datatables.net please?

Allan

ffrechina

Ok, I will create one... meanwhile if it helps, I could patch this issue commenting this line

dt.on( 'draw.dtr', function () {
                        dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
                            var row = dt.row( idx );
                            if ( row.child.isShown() ) {
                                var info = that.c.details.renderer( dt, idx );
                                //row.child( info, 'child' ).show();
                            }
                        } );
                    } );

which is the line 161 of dataTables.responsive.js

ffrechina

I can't reproduce the error using JSFiddle

http://live.datatables.net/mamozaji/1/edit