Close the previous detailed view, Child Rows, JQuery DataTables

Hi there,

I want to create a Jquery datatable within the child row of the main datatable.

The detailed data table, is going to contain the same information, and using the standard examples on the DataTables site, I can achieve what i require by using the following code.

$("#messagesDT tbody").on("click", "td.details-control", function () {

        var tr = $(this).closest("tr");
        var row = oData.row(tr);

        if (row.child.isShown()) {
            
            $('div.slider', row.child()).slideUp(function () {
                row.child.hide();
                tr.removeClass('shown');
            });
           
        }

        else {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass("shown");
            $("#tblTransactions").dataTable({});
        }
    });

Select allOpen in new window

My problem, is that this works fine, if I have a single row in my main table, and click through to see the detailed table (tblTransactions). However, whenever there is another row, then I get a Jquery error, stating the table tblTransactions has already been initialized.

So, how can I get around this issue?