title: DataTable does not apply style when called from ajax
body: <p>I have a basic SpringBoot app. using Spring Initializer, JPA, embedded Tomcat, Thymeleaf template engine, and package as an executable JAR file .
  I have a datatable defined 2, 1 using ajax, the other one without ajax:</p>
  
  <pre><code>    &lt;table id="deviceEventTable" class="pure-table"  style="position: relative;"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
             &lt;th class="col_battery"&gt;&lt;!-- BATTERY --&gt;
                  BATERIA
              &lt;/th&gt;
              &lt;th class="col_last_event"&gt;&lt;!-- LAST EVENT --&gt;
                 HORA
              &lt;/th&gt;
  
          &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;/table&gt;                            
  
  &lt;table id="deviceEventTable2" class="pure-table"  style="position: relative;"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
               &lt;th class="col_battery"&gt;&lt;!-- BATTERY --&gt;
                  BATERIA
              &lt;/th&gt;
              &lt;th class="col_last_event"&gt;&lt;!-- LAST EVENT --&gt;
                 HORA
              &lt;/th&gt;
  
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr th:each="deviceEvent : ${deviceEvents}"  th:onclick="'window.location.href = \'' + @{/deviceevent/{id}(id=${deviceEvent.id})} + '\''"   &gt;
              &lt;td class="col_battery"&gt;&lt;!-- BATTERY --&gt;
                  &lt;div class="progressBar" id="max20"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;!-- bar % (Change ID maxnumber)--&gt;
              &lt;/td&gt;
              &lt;td class="col_last_event"  &gt;&lt;/td&gt;
              &lt;!-- LAST EVENT --&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>in the batterty td I see this</p>
  
  <pre><code>&lt;td class="col_battery"&gt;&lt;!-- BATTERY --&gt;
                                              &lt;div class="progressBar" id="max20"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;!-- bar % (Change ID maxnumber)--&gt;
                                          &lt;/td&gt;
  </code></pre>
  
  <p>and this is exactly what I get from the ajax call, but the result is different: in 1 the style is applied, but not in the ajax one.</p>
  
  <p><a href="https://i.stack.imgur.com/Oqgf2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Oqgf2.png" alt="enter image description here"></a></p>
  
  <p>Here the calling of the tables:</p>
  
  <pre><code>$(document).ready(function() {
  
      $.fn.dataTable.ext.errMode = 'throw';
  
      var ajaxUrl = /*[[@{/api/users/{user}/datatableList(user=${#authentication.principal.id})}]]*/ ""
  
      var table = $('#deviceEventTable').DataTable( {
          order: [[ 0, "desc" ]],
          select: true,
          bLengthChange: false,
          stateSave: true,
          pageLength: 20,
          ajax: ajaxUrl, 
             "columns": [
  
                 { data: 'battery' },
                 { data: 'dateTime' }
  
             ] 
      });
  
      setInterval( function () {
          table.ajax.reload( null, false ); // user paging is not reset on reload
      }, 2000 );
  
  
      table.on('select.dt deselect.dt', function() {
            localStorage.setItem( 'DataTables_selected', table.rows( { selected: true }).toArray() )   
      })
  
  
  
  
      var table = $('#deviceEventTable2').dataTable( {
          order: [[ 0, "desc" ]],
          select: true,
          bLengthChange: false,
          stateSave: true,
          pageLength: 20,
          initComplete: function() {
              var api = this.api();
  
              if (localStorage.getItem( 'DataTables_selected' )!=null &amp;&amp; localStorage.getItem( 'DataTables_selected' ) != 'undefined') {          
                  var selected = localStorage.getItem( 'DataTables_selected' ).split(',');
                  //var selected = '0';
                  selected.forEach(function(s) {
                  api.row(s).select();
                  })
              }
  
            } 
      });
  
  
  } );
  
  /*]]&gt;*/
  &lt;/script&gt;
  </code></pre>
  
  <p>I've changed to </p>
  
  <pre><code>ajax: ajaxUrl, 
             "columns": [
  
                 { data: 'battery', className: "col_battery" },
                 { data: 'dateTime' }
  
             ] 
  </code></pre>
  
  <p>The problem comes from another js that is adding the class:</p>
  
  <pre><code>/* 
  PROGRESS BAR
  */
  // Progres Bar
  function progress(percent, element) {
      var progressBarWidth = percent + '%';
          if(percent &lt;= 15){
              element.find('div').addClass("red_bar");
          }else if((percent &gt;15) &amp;&amp; (percent &lt; 50)){
              element.find('div').addClass("orange_bar");
          }else{
              element.find('div').addClass("green_bar");
          }
      // Without labels:
      element.find('div').animate({ width: progressBarWidth }, 500);
  }
  
  $(document).ready(function() { 
      $('.progressBar').each(function() { 
          var bar = $(this);
          var max = $(this).attr('id');
          max = max.substring(3);
          progress(max, bar);
      });
  });
  </code></pre>
  
  <p>with the same result</p>