How to use operator (>, <) on fnRowCallback

swarabhaskara

Hi,

First of, thanks for the great plugin.

I have a serverside data-based table and I've succeeded to append text (e.g. Not started, In progress, Completed ) on column 10 based on column 9 using the following function,
[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( aData[9] == "0" )
{
$jx('td:eq(10)', nRow).html( "Not started" );
}
if ( aData[9] < "100" )
{
$jx('td:eq(10)', nRow).html( "In progress" );
}
if ( aData[9] == "100" )
{
$jx('td:eq(10)', nRow).html( "Completed" );
}
return nRow;
}
[/code]
But, it doesn't seem to work nicely when using operator more than ( > ). The following if statement,
[code]
if ( aData[9] > "100" )
{
$jx('td:eq(10)', nRow).html( "Error" );
}
[/code]
seems to override the operator " < ". The appended text is "Error" although the value in column 9 is less than 100. I also can't figure out how to make something like,
[code]
if ( "0" < aData[9] < "30" )
{
$jx('td:eq(10)', nRow).html( "Stage 1" );
}
if ( "31" < aData[9] < "60" )
{
$jx('td:eq(10)', nRow).html( "Stage 2" );
}
[/code]
to work. Thanks in advance for your help.

allan

So I understand correctly - the rendering is working, but the rendering is not? You aren't closing the tag at the end, but instead opening a new tag - which jQuery (or the browser) might be objecting to.

Allan

swarabhaskara

Hi Allan,

Thanks for your reply and sorry for I didn't put my problem more clearly. What I meant was when there're only 3 if statements as in my first code above, DataTables renders nicely. In Column 10 appears either "Not started", "In progress" or "Completed" in accordance with the value in column 9. But when I added my first code with my second code above, in column 10 appears "Error" even though the value in column 9 is less than "100", for instance, 10, 50, 90 etc. But, when the value in column 9 is 0 or 100, the if statement works as expected.

I've corrected the tag into but it doesn't fix the problem. There's certainly something missing in my part that I haven't been able to resolve it yet. Here is my code:
[code]
var $jx = jQuery.noConflict();
$jx (document).ready(function(){
var oTable = $jx ('#test').dataTable({
"bProcessing": true,
"bServerSide": true,
"sDom": "lrtip",
"bAutoWidth": false,
"aaSorting": [[ 0, "desc" ]],
"sAjaxSource": src="<?php bloginfo('template_url'); ?>test.php",
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"sScrollXInner": "160%",
"bScrollCollapse": true,
"bAutoWidth": false,
"fnDrawCallback": function () {
var oEditable = $jx('#test tbody tr td:nth-child(8)').editable( src="<?php bloginfo('template_url'); ?>edit.php", {

"callback": function( sValue, y )
{
var aPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( aPos[0] );
oTable.fnDraw();
},
submitdata : function(value, settings)
{
var aPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( aPos[0] );
return {id: aData[0], pos: aPos[1],};
},
"height" : "14px",
"event" : "click",
});
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( aData[9] == "0" )
{
$jx('td:eq(10)', nRow).html( "Not started" );
}
if ( "1" < aData[9] < "30" )
{
$jx('td:eq(10)', nRow).html( "Stage 1" );
}
if ( "31" < aData[9] < "60" )
{
$jx('td:eq(10)', nRow).html( "Stage 2" );
}
if ( "61" < aData[9] < "90" )
{
$jx('td:eq(10)', nRow).html( "Stage 3" );
}
if ( "91" < aData[9] < "100" )
{
$jx('td:eq(10)', nRow).html( "Final stage" );
}
if ( aData[9] == "100" )
{
$jx('td:eq(10)', nRow).html( "Completed" );
}
if ( aData[9] > "100" )
{
$jx('td:eq(10)', nRow).html( "Data Error" );
}
return nRow;
},
"aoColumnDefs": [
{
"aTargets": [ 2 ],
"sClass": "right",
},
{
"aTargets": [ 0, 1, 8, 9, 10 ],
"sClass": "center",
}

]
});
});
[/code]

PS. For "more than and less than" part, I've also tried this:
[code]
if ( aData[9] > "91" && aData[9] < "100" )
[/code]
but didn't work either. Thanks

allan

There might be a couple of things going on here, having a look at the code. Hopefully combined they will solve it, if not, let us know and I'll take another look...

1. "1" < aData[9] < "30" - this isn't valid Javascript. You need to do something like 1 < aData[9] && aData[9] < 30

2. You are checking for the "less that" of a string. While Javascript is loosely typed, so it might be possible to get away with this, it would be better to do this: 1 < parseInt(aData[9]) && parseInt(aData[9]) < 30.

3. I'd suggest using "else if" after the first condition, just in case the result falls through my mistake at a later point. It should also make the code execution slightly faster.

Allan

swarabhaskara

Hi Allan,

The table works as expected now. Thank you big time.