Close details on all rows

Pennywise

Hello,

Does anyone know of a function I can use to close the details of all open rows in a table? Kind of like this, but for every open details: https://datatables.net/examples/api/row_details.html

Pennywise

I sort of figured this out, but still need help. On a mobile browser, if I navigate away from the page with the table and the table details are showing, and then click back, the details are still open. How do I hide the details before navigating away? I tried using aonbeforeonload event listener, but mobile browsers don't seem to like that...at least not Safari.

allan

I'm not sure I'm going to be able to answer that I'm afraid. I can say that you would use rows().every() to loop over the rows and then row().child.hide() to close each one, but as to closing when you navigate away? It sounds like that might be something mobile browsers disable for performance.

Allan

Pennywise

I sort of figured it out using the pagehide event listener. This works so far in Safari mobile, google mobile, and Firefox mobile for iOS:

        window.addEventListener("pagehide", function(e) {
            $( "tr" ).each(function() {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                if (row.child.isShown()) {
                    row.child.hide();
                };
            });
        });

My problem is that when I click the back button, the child row is hidden like I want, but the details button is still red with the minus sign. How can I toggle just the details button back to green after hiding the child?

allan

You'd need to change the class of the row like in the example you linked to. tr.removeClass('shown'); - or in this case $( row.node() ).removeClass('shown');.

Allan

Pennywise

Thanks for the reply! Unfortunately that still isn't doing it....

Pennywise

When I run the following code, "z" and "x" come back false, suggesting that the class "shown" is never applied in the first place. Any thoughts?

        window.addEventListener("pagehide", function(e) {
            $( "tr" ).each(function() {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                if (row.child.isShown()) {
                    console.log(row, row.child, row.child.isShown()) /// comes back true
                    var z = tr.hasClass('shown');
                    console.log(z);
                    var x = $(row.node()).hasClass('shown');
                    console.log(x);
                    row.child.hide();
                    $( row.node() ).removeClass('shown');.

                };
            })
        })

These are the scripts and CSS I am using:

<link href="~/Content/DataTables.css" media="all" rel="stylesheet" type="text/css" />
<link href="~/Content/ResponsiveDatatables.css" media="all" rel="stylesheet" type="text/css" />
<script src="~/Scripts/DataTables.js" type="text/javascript"></script>
<script src="~/Scripts/ResponiveDataTables.js" type="text/javascript"></script>

Pennywise

I finally think I figured it out. I had to remove the parent class, not the shown class. This code seems to work:

        window.addEventListener("pagehide", function(e) {
            $( "tr" ).each(function() {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('parent');

                };
            })
        })

allan

Thanks for posting back. Good to hear you have it working now!

Allan