troubleshooting Question

Close the previous detailed view, Child Rows, JQuery DataTables

Avatar of Wayne Atherton
Wayne Atherton asked on
jQueryJavaScriptWeb DevelopmentJScriptDatabases
2 Comments1 Solution766 ViewsLast Modified:
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({});
        }
    });

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
Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros