Answers

• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  May 2015

  What you will need to do is loop over the rows in the table to determine which are currently "open", before you make the Ajax request, then once the Ajax request has completed, loop over the new rows in the table and reopen them as required based on which were previously open.

  This is something that I might include in a future version of DataTables, but for the moment, that is how it needs to be done.

  Allan
• Anonymole Posts: 13Questions: 2Answers: 1

  May 2015

  I suspected as much. Thanks for taking the time time answer.
• Anonymole Posts: 13Questions: 2Answers: 1

  June 2015

  You don't have an example of how to loop over the rows to determine which are open do you? Like an end to end solution for this problem of reopening child tables?
• Anonymole Posts: 13Questions: 2Answers: 1

  June 2015 edited June 2015

  I'm absolutely baffled here. There seem to be so many variations of datatable, fnThisOrThat, nodes, rows, trs, indexes...

  Here's what I've got:

  // Add event listener for opening and closing details
  $('#containerTable tbody').on('click', 'td.details-control', function () {
      var tr = $(this).closest('tr');
      var table = $('#containerTable').DataTable();
      var row = table.row(tr);
  
      // This row is already open - close it
      if (row.child.isShown()) {
          row.child.hide();
          tr.removeClass('shown');
          rowIndex = row[0][0];
          var idx = openTableRows.indexOf(rowIndex);
          openTableRows.splice(idx, 1);
          Cookies("openRows", openTableRows);
      }
          // Open this row
      else {
          row.child(formatChildTable(tr, row.data())).show();
          tr.addClass('shown');
          rowIndex = row[0][0];
          if (openTableRows.indexOf(rowIndex) < 0)
              openTableRows.push(rowIndex); // push the row index into the openrows array
          Cookies("openRows", openTableRows);
      }
  });
  

  openTableRows = []

  And Cookies is this: * https://github.com/js-cookie/js-cookie

  And then on refresh:

  function reOpenRows() {
      var openRows = Cookies("openRows");
      if (!openRows)
          return;
      openTableRows = eval(openRows);
      var table = $('#containerTable').DataTable();
      $(table.rows().nodes()).each(function (idx, tr) {
          if (openTableRows.indexOf(idx) >= 0) {
              $(tr).addClass("shown");
              //table.row($(tr)).child.show();  // DON'T WORKIE
              //$(tr).click();  // DON'T WORKIE
              //$(tr).trigger('click');  // DON'T WORKIE
          }
      });
  }
  

  But I don't think this is the right way - obvisously - as this does not even come close to working... Any help would be appreciated.
• Anonymole Posts: 13Questions: 2Answers: 1

  June 2015

  AHHHHH -- got it.

  One has to fully reproduce the child table fill on child.show()

  function reOpenRows() {
      var openRows = Cookies("openRows");
      if (!openRows)
          return;
      openTableRows = eval(openRows);
      var table = $('#containerTable').DataTable();
      $(table.rows().nodes()).each(function (idx, tr) {
          if (openTableRows.indexOf(idx) >= 0) {
              row = table.row(tr);
              row.child(formatChildTable(tr, row.data())).show();
              $(tr).addClass("shown");
          }
      });
  }
  
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 2015

  Yes you will need to do that for new rows. Existing rows would have their child rows available still and could still be shown if needed.

  Good to hear you got it sorted.

  Allan
• Anonymole Posts: 13Questions: 2Answers: 1

  June 2015

  I do a JSON fetch and table rebuild every 60 seconds. There are no existing rows. I realize that there's ways (I assume) to refresh the table's data (I guess) and invalidate the table or instruct it to reconcile itself. I could barely get this version working... I'm OK with this method. I will say that your tools super -- but, the myriad versions and conflicting styles of accomplishing something make it confusing to use.
• Anonymole Posts: 13Questions: 2Answers: 1

  June 2015

  Update: I could not use the IDX of the row. After sorting the row indexes get all rearranged. So I had to rely upon using the first cell of the row as a key to use to identify any one row. I then loop through the saved cookie keys looking for the identical text.

  $(table.rows().nodes()).each(function (idx, tr) {
      rowIDText = $(tr).find("td:first").text();
      if (openTableRows.indexOf(rowIDText) >= 0) {
  

  And in the row click event:

  rowIDText = $(tr).find("td:first").text();
  var idx = openTableRows.indexOf(rowIDText);
  openTableRows.splice(idx, 1);
  
  ###
  
  rowIDText = $(tr).find("td:first").text();
  if (openTableRows.indexOf(rowIDText) < 0)
      openTableRows.push(rowIDText); // push the row index into the openrows array