I have developed a simple SpringBoot application using Spring Initializer, JPA, embedded Tomcat, Thymeleaf template engine, and packaged it as an executable JAR file. Within this application, I have implemented two datatables: one utilizing ajax and the other without ajax.
<table id="deviceEventTable" class="pure-table" style="position: relative;">
<thead>
<tr>
<th class="col_battery"><!-- BATTERY -->
BATTERY
</th>
<th class="col_last_event"><!-- LAST EVENT -->
TIME
</th>
</tr>
</thead>
</table>
<table id="deviceEventTable2" class="pure-table" style="position: relative;">
<thead>
<tr>
<th class="col_battery"><!-- BATTERY -->
BATTERY
</th>
<th class="col_last_event"><!-- LAST EVENT -->
TIME
</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>
When examining the battery column, I observe the following:
<td class="col_battery"><!-- BATTERY -->
<div class="progressBar" id="max20"><div></div></div><!-- bar % (Change ID maxnumber)-->
</td>
Interestingly, on the ajax call, the styling of the elements is not consistent with the expected results as seen in the non-ajax scenario.
https://i.sstatic.net/Oqgf2.png
Below is the usage 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 );
}, 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(',');
selected.forEach(function(s) {
api.row(s).select();
})
}
}
});
} );
/*]]>*/
</script>
To address the issue, I made adjustments to the code:
ajax: ajaxUrl,
"columns": [
{ data: 'battery', className: "col_battery" },
{ data: 'dateTime' }
]
The problem seems to be related to another JavaScript function responsible for adding specific classes to elements:
/*
PROGRESS BAR
*/
// Progress Bar
function progress(percent, element) {
var progressBarWidth = percent + '%';
if(percent <= 15){
element.find('div').addClass("red_bar");
}else if((percent > 15) && (percent < 50)){
element.find('div').addClass("orange_bar");
}else{
element.find('div').addClass("green_bar");
}
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);
});
});
Despite attempted fixes, the issue persists.