title: Column search fails after modifying cell value
body: <p>I have the following code (snippet attached):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE HTML&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;
          Exact matches overview
      &lt;/title&gt;
       
          &lt;script type="text/javascript" src="/static/script/api_recs.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/static/script/site_filter.js"&gt;&lt;/script&gt;
      
          &lt;link rel="stylesheet" type="text/css"
                href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.css"/&gt;
      
          &lt;script type="text/javascript"
                  src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.js"&gt;&lt;/script&gt;
      
          &lt;script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.13/sorting/natural.js"&gt;&lt;/script&gt;
      
      
       
          &lt;style type="text/css"&gt;
              tfoot {
                  display: table-header-group;
              }
      
              html {
                  width: 58%;
              }
      
              .red_background {
                  background-color: #ffe4e9 !important;
              }
      
              .red_bold_font {
                  font-weight: bolder;
                  color: red;
              }
      
          &lt;/style&gt;
      
      &lt;/head&gt;
      &lt;body&gt;
      
       &lt;img id="loader" src="/static/img/loader_animation_large.gif" 
       style="
        width:36px; 
        height:36px; 
        display: none;
        position:absolute; 
        top:50%;
        left:50%;
        margin-top:-18px;
        margin-left:-18px;"/&gt;
       &lt;p&gt;&lt;a href="/accounts/logout/"&gt;Logout&lt;/a&gt; | &lt;a href="/accounts/profile/"&gt;Home&lt;/a&gt;&lt;/p&gt;
          
          &lt;div id="title"&gt;
              &lt;b style="font-size:200%"&gt;Exact matches overview&lt;br&gt;&lt;/b&gt;
          &lt;/div&gt;
      
          &lt;table id='matches_table-id' class="display" cellspacing="0" style="float: left;"&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                  
                      &lt;th&gt;Date&lt;/th&gt;
                  
                      &lt;th&gt;Customer name&lt;/th&gt;
                  
                      &lt;th&gt;Customer SKU count&lt;/th&gt;
                  
                      &lt;th&gt;Competitor name&lt;/th&gt;
                  
                      &lt;th&gt;Total matches&lt;/th&gt;
                  
                      &lt;th&gt;Total matches 2 weeks ago&lt;/th&gt;
                  
                      &lt;th&gt;Matches diff&lt;/th&gt;
                  
                      &lt;th&gt;Coverage (%)&lt;/th&gt;
                  
                      &lt;th&gt;Coverage 2 weeks ago (%)&lt;/th&gt;
                  
                      &lt;th&gt;Coverage diff (%)&lt;/th&gt;
                  
                      &lt;th&gt;Competitor benchmark coverage (%)&lt;/th&gt;
                  
                      &lt;th&gt;Benchmark coverage diff (%)&lt;/th&gt;
                  
                  &lt;th&gt;violated&lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tfoot&gt;
              &lt;tr&gt;
                  
                      &lt;th&gt;Date&lt;/th&gt;
                  
                      &lt;th&gt;Customer name&lt;/th&gt;
                  
                      &lt;th&gt;Customer SKU count&lt;/th&gt;
                  
                      &lt;th&gt;Competitor name&lt;/th&gt;
                  
                      &lt;th&gt;Total matches&lt;/th&gt;
                  
                      &lt;th&gt;Total matches 2 weeks ago&lt;/th&gt;
                  
                      &lt;th&gt;Matches diff&lt;/th&gt;
                  
                      &lt;th&gt;Coverage (%)&lt;/th&gt;
                  
                      &lt;th&gt;Coverage 2 weeks ago (%)&lt;/th&gt;
                  
                      &lt;th&gt;Coverage diff (%)&lt;/th&gt;
                  
                      &lt;th&gt;Competitor benchmark coverage (%)&lt;/th&gt;
                  
                      &lt;th&gt;Benchmark coverage diff (%)&lt;/th&gt;
                  
                  &lt;th&gt;violated&lt;/th&gt;
      
              &lt;/tr&gt;
              &lt;/tfoot&gt;
              &lt;tbody&gt;
              
                  &lt;tr&gt;
                      
                          &lt;td&gt;&lt;span&gt;2017-02-20 00:00&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;bestonix (-104)&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;2461&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;target.com (-106)&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;517&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;625&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;-108&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;21.0%&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;34.4%&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;-13.4%&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;60.0%&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;-39.0%&lt;/span&gt;&lt;/td&gt;
                      
                      &lt;!-- initialize invisible "violated" column --&gt;
                      &lt;td&gt;&lt;span&gt;not&lt;/span&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              
                  &lt;tr&gt;
                      
                          &lt;td&gt;&lt;span&gt;2017-02-20 00:00&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;bestonix (-104)&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;2461&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;walmart.com (-105)&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;1052&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;1014&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;38&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;42.7%&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;55.7%&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;-13.0%&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;60.0%&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;-17.3%&lt;/span&gt;&lt;/td&gt;
                      
                      &lt;!-- initialize invisible "violated" column --&gt;
                      &lt;td&gt;&lt;span&gt;not&lt;/span&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              
                  &lt;tr&gt;
                      
                          &lt;td&gt;&lt;span&gt;2017-02-20 00:00&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;bestonix (-104)&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;2461&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;amazon_bestonix (278)&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;1347&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;1309&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;38&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;54.7%&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;72.0%&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;-17.2%&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;60.0%&lt;/span&gt;&lt;/td&gt;
                      
                          &lt;td&gt;&lt;span&gt;-5.3%&lt;/span&gt;&lt;/td&gt;
                      
                      &lt;!-- initialize invisible "violated" column --&gt;
                      &lt;td&gt;&lt;span&gt;not&lt;/span&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;div style="clear: both"&gt;&lt;/div&gt;
          &lt;script&gt;
              $(document).ready(function () {
                  var BENCHMARK_DIFF_COL = 11;
                  var COVERAGE_COL = 7;
                  var COVERAGE_DIFF_COL = 9;
                  var VIOLATED_COL = 12;
                  // Setup column search - add a text input to each footer cell
                  $('#matches_table-id tfoot th').each(function () {
                      var title = $(this).text();
                      $(this).html('&lt;input type="text" placeholder="Filter " style="width:  50px"' + " /&gt;");
                  });
      
                  // DataTable
                  var table = $('#matches_table-id').DataTable({
                          //conditional formatting
                          createdRow: function (row, data, index) {
                              if (parseFloat($(data[BENCHMARK_DIFF_COL]).text()) &lt; parseFloat(-20)) {
                                  $(row).addClass("red_background");
                                  $(row).find('td:eq(' + BENCHMARK_DIFF_COL + ')').addClass("red_bold_font");
                                  $(row).find('td:eq(' + VIOLATED_COL + ')').html("&lt;span&gt;violated&lt;/span&gt;");
      
      
                              }
                              if (parseFloat($(data[COVERAGE_COL]).text()) &lt; parseFloat(10)) {
                                  $(row).addClass("red_background");
                                  $(row).find('td:eq(' + COVERAGE_COL + ')').addClass("red_bold_font");
                                  $(row).find('td:eq(' + VIOLATED_COL + ')').html("&lt;span&gt;violated&lt;/span&gt;");
      
                              }
                              if (parseFloat($(data[COVERAGE_DIFF_COL]).text()) &lt; parseFloat(-15)) {
                                  $(row).addClass("red_background");
                                  $(row).find('td:eq(' + COVERAGE_DIFF_COL + ')').addClass("red_bold_font");
                                  $(row).find('td:eq(' + VIOLATED_COL + ')').html("&lt;span&gt;violated&lt;/span&gt;");
      
                              }
                          },
                          //disable ordered column style class change on sorting
                          "orderClasses": false,
      
      
      
      
      
                          dom: 'l Brtip',
                          "aLengthMenu": [
                              [20, 50, 100, -1],
                              [20, 50, 100, "All"]]
      
                      })
                      ;
                  // Apply the search
                  table.columns().every(function () {
                      var that = this;
      
                      $('input', this.footer()).on('keyup change', function () {
                          if (that.search() !== this.value) {
                              that
                                  .search(this.value)
                                  .draw();
                          }
                      });
                  });
              });
          &lt;/script&gt;
      
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, I am changing the value of the last column according to value in other columns.
  The problem: after the values in this column are modified the search is no longer behaves as expected.
  it seems that the search behaves like I never changed the values in these cells and sees the previous "default" values from the html table initialization.
  I tried to wrap and unwrap the new values with <code>&lt;span&gt;</code> tag but with no success to solve the problem.
  What am I missing out here?</p>