DataTables.row(tr) is undefined when page is postback in second time.

theori

Hi all,
sorry i'm a new datatables user so i don't know how or where to post this problem.
i'm using visual studio 2012 - MVC 4 - Oracle Server.
i used this example to show and hide child rows : http://datatables.net/examples/server_side/row_details.html

when the page is opening first time, the code is working perfectly. But when i click an input type="button" after the datatables running, it gives me an error; var row = dt.row(tr); the "row" is undefined. i think, DataTables is null or something when running second time.

here is my inputs:

<input type="text" id="txtBasTar" name="txtBasTar" class="date" value="@DateTime.Now.AddDays(-7).ToShortDateString()" />

<input type="text" id="txtBitTar" name="txtBitTar" class="date" value="@DateTime.Now.ToShortDateString()" />

<input type="button" name="btnSorgula" id="btnSorgula" class="sorgula-button" value="Sorgula" onclick="CallDataTable();" />

When the user open the webpage, code is running successfully with no errors. But when the user click the input button, it calls CallDataTable() again and DataTables gives an error.

here is my code;

$(document).ready(function () {
CallDataTable();
});

function CallDataTable() {

    var dt = $('#LogDataTable').DataTable({
        "bServerSide": true,
        "destroy": true,         
        "fnServerParams": function (aoData) {
            aoData.push({ "name": "BasTar", "value": $('#txtBasTar').val() },
                        { "name": "BitTar", "value": $('#txtBitTar').val() })
        },
        "sAjaxSource": "GetLogs",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "language": {
            "sProcessing": "İşleniyor...",
            "sLengthMenu": "Sayfada _MENU_ Kayıt Göster",
            "sZeroRecords": "Eşleşen Kayıt Bulunamadı",
            "sInfo": "  _TOTAL_ Kayıttan _START_ - _END_ Arası Kayıtlar",
            "sInfoEmpty": "Kayıt Yok",
            "sInfoFiltered": "( _MAX_ Kayıt İçerisinden Bulunan)",
            "sInfoPostFix": "",
            "sSearch": "Ara:",
            "sUrl": "",
            "oPaginate": {
                "sFirst": "İlk",
                "sPrevious": "Önceki",
                "sNext": "Sonraki",
                "sLast": "Son"
            }
        },
        "aoColumns": [
                                        {
                                            "class": "details-control",
                                            "orderable": false,
                                            "defaultContent": "",
                                            "data": null
                                        },
                                        { "sName": "ID" },
                                        { "sName": "NODE_NAME" },
                                        { "sName": "ALARM_NAME" },
                                        { "sName": "CONTACT_NAME1" },
                                        { "sName": "CALL_STATE" },
                                        { "sName": "CALLED_NUMBER" },
                                        { "sName": "CALL_TIME" }
        ],
        "aaSorting": [[1, 'desc']]
    });

    var detailRows = [];

    $('#LogDataTable tbody').on('click', 'tr td:first-child', function () {

        var tr = $(this).closest('tr');           
        var row = dt.row(tr);
        var idx = $.inArray(tr.attr('CALL_TIME'), 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('CALL_TIME'));
            }
        }

    });
    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on('draw', function () {
        $.each(detailRows, function (i, id) {
            $('#' + id + ' td:first-child').trigger('click');
        });
    });

}

function format(data) {
return '

' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '

Contact Name 2:	' + data[8] + '	Contact Numbers :	' + data[9] + ' / ' + data[10] + '
Alarm Time :	' + data[11] + '	State Time :	' + data[12] + '
Audio Path :	' + data[13] + '	Session ID :	' + data[14] + '
Reply Time :	' + data[15] + '	YON Contact Numbers :	' + data[16] + ' / ' + data[17] + '

';
}

theori

sorry i forgot the Datatables version is 1.10.0

debug code : http://debug.datatables.net/iyapuy

theori

thanks for your help :)
ok i found a solution.

just put
$('#LogDataTable tbody').off('click');
above the
$('#LogDataTable tbody').on('click', 'tr td:first-child', function ()

and its work...