Vertisan Vertisan - 3 months ago 20
Javascript Question

Uncaught TypeError: row.child.hasClass is not a function

I'm creating row details for DataTables without Ajax.

I do somethink like this for show:

$(document).ready(function () {
function format ( name, value ) {
return '<div>Name: ' + name + '<br />Value: ' + value + '</div>';
}
var table = $('#servicetable').DataTable({
stateSave: true,
pageLength: 10,
});

$('#servicetable tbody').on('click', 'button.test', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
row.child( format( tr.data('child-name'), tr.data('child-value') ) ).show();

if ( row.child.hasClass('shown') ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
});


When I click button for open - everythink is ok, but when I click again for hide I getting error:

Uncaught TypeError: row.child.hasClass is not a function


What's bad?

Here is demo: JSFiddle

mtb mtb
Answer

Check this jsfiddle

Datatable child doesn't seem to provide a hasClass function. Also I think you were checking for 'shown' class in the wrong element. I also removed row.child.show() on opening, it is already done before the if statement.

       if ( tr.hasClass('shown') ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            tr.addClass('shown');
        }