DataTable does not apply style when called from ajax

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:

    <table id="deviceEventTable" class="pure-table"  style="position: relative;">
    <thead>
        <tr>
           <th class="col_battery"><!-- BATTERY -->
                BATERIA
            </th>
            <th class="col_last_event"><!-- LAST EVENT -->
               HORA
            </th>

        </tr>
    </thead>
</table>                            

<table id="deviceEventTable2" class="pure-table"  style="position: relative;">
    <thead>
        <tr>
             <th class="col_battery"><!-- BATTERY -->
                BATERIA
            </th>
            <th class="col_last_event"><!-- LAST EVENT -->
               HORA
            </th>

        </tr>
    </thead>
    <tbody>
        <tr th:each="deviceEvent : ${deviceEvents}"  th:onclick="'
window.location.href = \'' + @{/deviceevent/{id}(id=${deviceEvent.id})}
 + '\''"   >
            <td class="col_battery"><!-- BATTERY -->
                <div class="progressBar" id="max20"><div></div></div>
<!-- bar % (Change ID maxnumber)-->
            </td>
            <td class="col_last_event"  ></td>
            <!-- LAST EVENT -->
        </tr>
    </tbody>
</table>

in the batterty td I see this

<td class="col_battery"><!-- BATTERY -->
                                            <div class="progressBar" id="max20">
<div></div></div><!-- bar % (Change ID maxnumber)-->
                                        </td>

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.

Here the calling of the tables:

$(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 && localStorage.getItem( 'DataTables_selected' ) != 'undefined') {          
                var selected = localStorage.getItem( 'DataTables_selected' ).split(',');
                //var selected = '0';
                selected.forEach(function(s) {
                api.row(s).select();
                })
            }

          } 
    });


} );

/*]]>*/
</script>

I've changed to

ajax: ajaxUrl, 
           "columns": [

               { data: 'battery', className: "col_battery" },
               { data: 'dateTime' }

           ] 

with the same result


from DataTable does not apply style when called from ajax