details row not working

patopatopato

hi there, im following the tutorial that teaches how to show details row on datatables but the following piece of code is giving me problems:

dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#'+id+' td:first-child').trigger( 'click' );
} );
} );

javascript is thelling me that dt isn;t referenced and am agree with that because a cant see where is declared
the datatable is rendered succesfully but the details row doesnt
sorry for my bad english.

allan

Please link to a test case showing the problem so we can debug it, as required in the forum rules.

Allan

patopatopato

sorry i found the dt reference already
it was here:

$(document).ready(function() {
var dt = $('#example').DataTable( { /////////////////////////////////<---------------------------sorry
i spent hours trying to
whats going on. lol but finally i realized about it.

javascript shows me another error:
Uncaught TypeError: undefined is not a function
when i click on the details column

on the following code:

$('#example tbody').on( 'click', 'tr td:first-child', function () {
var tr = $(this).parents('tr');
var row = dt.row( tr ); ///////////////////////////////// <------------- this line throws me the error
var idx = $.inArray( tr.attr('id'), detailRows );

    if ( row.child.isShown() ) {
        tr.removeClass( 'details' );
        row.child.hide();

        // Remove from the 'open' array
        detailRows.splice( idx, 1 );
    }
    else {
        tr.addClass( 'details' );
        row.child( format( row.data() ) ).show();

        // Add to the 'open' array
        if ( idx === -1 ) {
            detailRows.push( tr.attr('id') );
        }
    }
} );

thanks for your time datatables plugin rocks

NewHire

I am having the same error on line var row = dt.row(tr);

JavaScript runtime error: Object doesn't support property or method 'row'

NewHire

I was able to solve my issue, I was referencing lower case .dataTables in my code, it should have been

var dt = $('#example').DataTable(

allan

Ah - good to hear you found the solution. The second top FAQ covers this one.

Allan

hungnguyenjn

In my Datatable, I used both codes Inline Editting and Detail row. When I changed .dataTable to .DataTable as NewHire's solution, Detail row worked but Inline Editting did not work.

The error is "Uncaught TypeError: undefined is not a function"

function editRow (oTable, nRow)
{
var aData = oTable.fnGetData(nRow); <------ this line error;
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input id="cate_name_upd" type="text" value="'+aData[1]+'">';
jqTds[1].innerHTML = '<input id="cate_name_upd" type="text" value="'+aData[2]+'">';
jqTds[2].innerHTML = '<a id="config" class="func config" href="#&id='+aData[0]+'" title="Thiết lập"></a><a id="savUpd" class="func sav" href="#&id='+aData[0]+'" title="Lưu"></a><a id="exit" class="func exit" href="#" title="Không sửa"></a>';
}

Please! give me an advice, I have spent 2 days but I can't solve this problem

hungnguyenjn

Oh...sorry I have just read The second top FAQ Which Allan suggested above and I added .api() to the line

var row = oTable.api().row(tr);

it works. Thanks!

fagnervalente

Nice hungnguyenjn ! I resolved my problem using your sugestion:

var row = oTable.api().row(tr);

Tankyou!

allan

See also the FAQ I linked to before.

Allan