Hi,
I have a data table where the value to it is populated by server side processing. I have this configuration
<code>
$(document).ready(function() {
g.oTable = $('.display').dataTable({
"aoColumns":[null,null,{ "sClass": "fancy"},null,null,null,null,null,null,null,null,null,null,null,{ "sClass": "fancy"},null,null,null,null,null,null,null,{ "sClass": "tdgreen"}],
"bServerSide": true,
"sAjaxSource": "/progress/Request",
"bProcessing": true,
"sPaginationType": "full_numbers",
"bScrollCollapse" : true,
"bPaginate" : true,
"bFilter": true,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"aaSorting": [],
"sScrollX": "100%",
"sScrollY": $(window).height()-200,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
nRow.className = aData[23];
$('td:eq(20)', nRow).html('<a href=showProgress.do?s='+aData[1]+'_'+aData[2]+' Data[1]+'>'+aData[20]+'</a>');
$('td:eq(1)', nRow).html('<a href=showProgress.do?u='+aData[0]+ '&s='+aData[1]+'_'+aData[2]+' >'+aData[1]+'</a>');
$('td:eq(2)', nRow).html('<a href=showProgress.do?c='+aData[2]+ ' >'+aData[2]+'</a>');
$('td:eq(14)', nRow).html('<a href=showProgress.do?r='+aData[0]+ '&s='+ aData[1] + '><div class=meter-wrap><div class=progBar style="float: left"><div class=meter-text><span class=a>' + aData[14]+ '%</span></div></div></div></a>');
},
"bJQueryUI": true
});
</code>
Two issues:
Issue 1:
Progress bar not working (Possibly due to jscrpt doesnt get initialized?).
As can be seen, i have div proBar (on 14th td) which will show me progress bar as and when my data percentage increases. Based on percent (aData[14]) value it will fill the div space.
I have this for progBar
<code>
jQuery.each($('.progBar'),function(s){
w=jQuery.trim(this.children[0].children[0].innerHTML.replace("%", ""));
this.style.width=w+"%";
if (parseInt(w)<33){
this.style.backgroundColor="#FFFF99"
}else if (parseInt(w)<66){
this.style.backgroundColor="#FF8C00"
}else if (parseInt(w)<100){
this.style.backgroundColor="#32CD32"
}else {
this.style.backgroundColor="#40E0D0"
}
}
)
</code>
Can this be a problem for progress bar not working.
Issue 2:
Class specified in aoColumns, applies to both thead and td.
Also aoColumns has some class associated with it (for colr in that column), which seems to be applied on head (thead) as well. Can you help me to avoid this as well?
Thanks,
Sam
I have a data table where the value to it is populated by server side processing. I have this configuration
<code>
$(document).ready(function() {
g.oTable = $('.display').dataTable({
"aoColumns":[null,null,{ "sClass": "fancy"},null,null,null,null,null,null,null,null,null,null,null,{ "sClass": "fancy"},null,null,null,null,null,null,null,{ "sClass": "tdgreen"}],
"bServerSide": true,
"sAjaxSource": "/progress/Request",
"bProcessing": true,
"sPaginationType": "full_numbers",
"bScrollCollapse" : true,
"bPaginate" : true,
"bFilter": true,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"aaSorting": [],
"sScrollX": "100%",
"sScrollY": $(window).height()-200,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
nRow.className = aData[23];
$('td:eq(20)', nRow).html('<a href=showProgress.do?s='+aData[1]+'_'+aData[2]+' Data[1]+'>'+aData[20]+'</a>');
$('td:eq(1)', nRow).html('<a href=showProgress.do?u='+aData[0]+ '&s='+aData[1]+'_'+aData[2]+' >'+aData[1]+'</a>');
$('td:eq(2)', nRow).html('<a href=showProgress.do?c='+aData[2]+ ' >'+aData[2]+'</a>');
$('td:eq(14)', nRow).html('<a href=showProgress.do?r='+aData[0]+ '&s='+ aData[1] + '><div class=meter-wrap><div class=progBar style="float: left"><div class=meter-text><span class=a>' + aData[14]+ '%</span></div></div></div></a>');
},
"bJQueryUI": true
});
</code>
Two issues:
Issue 1:
Progress bar not working (Possibly due to jscrpt doesnt get initialized?).
As can be seen, i have div proBar (on 14th td) which will show me progress bar as and when my data percentage increases. Based on percent (aData[14]) value it will fill the div space.
I have this for progBar
<code>
jQuery.each($('.progBar'),function(s){
w=jQuery.trim(this.children[0].children[0].innerHTML.replace("%", ""));
this.style.width=w+"%";
if (parseInt(w)<33){
this.style.backgroundColor="#FFFF99"
}else if (parseInt(w)<66){
this.style.backgroundColor="#FF8C00"
}else if (parseInt(w)<100){
this.style.backgroundColor="#32CD32"
}else {
this.style.backgroundColor="#40E0D0"
}
}
)
</code>
Can this be a problem for progress bar not working.
Issue 2:
Class specified in aoColumns, applies to both thead and td.
Also aoColumns has some class associated with it (for colr in that column), which seems to be applied on head (thead) as well. Can you help me to avoid this as well?
Thanks,
Sam