title: Unable to invalidate data in jQuery DataTable when replacing rows
body: <p>I have a small jQuery Datatable that periodically updates it's rows on a one-by-one basis.  This is done by replacing the row with an "Updating" row, calling back to the server, receiving a row back as html, and replacing the "Updating" row with the new server-supplied html.  This works and the users see the updated information appear.</p>
  
  <p>However, if the user then clicks on a column header the rows in the table return to the "Updating" state that they had for a few milliseconds while the update was in progress.</p>
  
  <p>Here is the javascript in which I'm retrieving the row and attempting to invalidate its contents so that DataTables will sort (and display after sorting) the most-recently replacedWith() version of the row.</p>
  
  <pre><code>function getRow(svcName, rowId)
  {
      // Mark in progress
      $("#" + rowId).html("&lt;td colspan='5'&gt;" + svcName + "&lt;i class='fa fa-refresh fa-spin fa-1x fa-fw'&gt;&lt;/i&gt;&lt;/td&gt;").addClass('info');
  
      // Get the HTML
      $.ajax(
          {
              type: 'get',
              dataType: 'html',
              url: svcName,
              error: function (jqXHR, textStatus, errorText) {
                  $("#" + rowId).text("Error " + errorText + " (" + svcName + ")");
                  var row = $(".service-table").DataTable().row("#" + rowId);
                  row.invalidate('dom');
              },
              success: function (response, textStatus, jqXHR) {
                  // This response is visible in the table 
                  // UNTIL I sort the table, at which time it's the temporary 
                  // version of the row, above, which is restored 
                  // from the dataTable cache.
                  $("." + rowId).replaceWith(response);
                  var row = $(".service-table").DataTable().row("#" + rowId);
                  row.invalidate('dom');
                  //row.draw('row');
              }
          }
      );
  
  }
  </code></pre>
  
  <p>How can I force dataTable to be aware that I've replaced the row?</p>
  
  <p>UPDATE: I've updated the code as suggested in the answer by RickL, but see similar behavior:</p>
  
  <pre><code>function getRow(svcName, rowId)
  {
      // Mark in progress
      $("#" + rowId).html("&lt;td colspan='5'&gt;" + svcName + "&lt;i class='fa fa-refresh fa-spin fa-1x fa-fw'&gt;&lt;/i&gt;&lt;/td&gt;").addClass('info');
  
      // Get the HTML
      $.ajax(
          {
              type: 'get',
              dataType: 'html',
              url: svcName,
              success: function (response, textStatus, jqXHR) {
                  var table = $(".service-table:first").DataTable();
                  // get the index
                  var rowIndex = table.row("#" + rowId).index();
                  // get the jQuery representation of the row and replace
                  var $row = $(table.row(rowIndex).node());
                  $row.replaceWith(response);
                  table.row(rowIndex).invalidate(); //.draw(false);
              }
          }
      );
  
  }
  </code></pre>