Link to home
Create AccountLog in
Avatar of Wayne Atherton
Wayne Atherton

asked on

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({});
        }
    });

Open 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?
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Wayne Atherton
Wayne Atherton

ASKER

Hi, thanks for responding. I'm out of the country at the moment, and don't have access to try this, but will try it and reply when i'm back