DataTable does not apply style when called from ajax

nullpointer

I have a datatable defined 2, 1 using ajax, the other one without ajax:
Here the one that uses Ajax, but does not apply the col_battery class in the colum

var table = $('#deviceEventTable').DataTable( {
order: [[ 0, "desc" ]],
select: true,
bLengthChange: false,
stateSave: true,
pageLength: 20,
ajax: ajaxUrl,
"columns": [
{ data: 'id' },
{ data: 'deviceId' },
{ data: 'companyName' },
{ data: 'description' },
{ data: 'battery', className: 'col_battery'},
{ data: 'dateTime' },
{ data: 'signal' },
{ data: 'data' },
{ data: 'alarm' }
]
});

DEBUD CODE: oculab

kthorngren

The debugger does show the data for the columns but it does not show anything about the col_battery class nor how it's applied.

First I would use the browser's inspect tool to see if the class is applied to the column and that it is not over-ridden by another style.

Can you provide a link to your page for debugging?

This page works with your data. Applying it via ajax or JS data should result in the same data in Datatables.
http://live.datatables.net/wevuraci/1/edit

Maybe you can update the example with more specifics form your environment to show the problem.

Kevin

nullpointer

Hi Kevin,
Using the browser's inspect tool it seems to apply the same style correctly in both tables (?!)

kthorngren

The only this I see is the data for the battery column is different in both cases. For the working case the column has this:
<div class=\"progressBar\" id=\"max20\"><div class=\"orange_bar\" style=\"overflow: hidden; width: 0%;\"></div></div>

In the non-working case the data has this:
"battery": "<div class=\"progressBar\" id=\"max50\"><div></div></div>",

Maybe the missing class="orange_bar" in the non-working case is the issue?

Hard to say without seeing an example.

Kevin

nullpointer

Indeed, is the orange bar, that is added in another js:

/*
PROGRESS BAR
*/
// Progres 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");
}
// With labels:
// element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
// 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);
});
});

nullpointer

So I've created another function that solves the problem is there is no other way to do it:

setInterval( function () {
$('.progressBar').each(function() {
var bar = $(this);
var max = $(this).attr('id');
max = max.substring(3);
progress(max, bar);
}); // user paging is not reset on reload
}, 1000 );