Answers

• Pennywise Posts: 15Questions: 3Answers: 1

  February 2017

  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 Posts: 63,096Questions: 1Answers: 10,390 Site admin

  February 2017

  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 Posts: 15Questions: 3Answers: 1

  February 2017

  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 Posts: 63,096Questions: 1Answers: 10,390 Site admin

  February 2017

  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 Posts: 15Questions: 3Answers: 1

  February 2017

  Thanks for the reply! Unfortunately that still isn't doing it....
• Pennywise Posts: 15Questions: 3Answers: 1

  February 2017 edited February 2017

  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 Posts: 15Questions: 3Answers: 1

  February 2017 edited February 2017

  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 Posts: 63,096Questions: 1Answers: 10,390 Site admin

  February 2017

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

  Allan