How to use operator (>, <) on fnRowCallback
How to use operator (>, <) on fnRowCallback
swarabhaskara
Posts: 5Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
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
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
The table works as expected now. Thank you big time.