Soring break row color background

Hi Experts,

Need your expert help to complete last change in a Job.
Other than DataTable filters, I have my own custom filters also. And based on filters I am able to set rows alternate active class "even"or "odd" on alternate basis.
Like
var DataTableOrderItemsrows = $('#gvOrderItems').dataTable().fnGetNodes(); // 'gvOrderItems' is datatable name
var flagRowAlternate = false;
for (var i = 0; i < DataTableOrderItemsrows.length; i++) {
if (some condittion) {
$(DataTableOrderItemsrows[i]).show();

//logic to set aleternate row color
if (flagRowAlternate) {
$(DataTableOrderItemsrows[i]).removeClass("even odd").addClass("odd");
flagRowAlternate = false;
}
else {
$(DataTableOrderItemsrows[i]).removeClass("even odd").addClass("even");
flagRowAlternate = true;
}
}
else { // if condition false
$(DataTableOrderItemsrows[i]).hide();
}
} // end for loop

The out put is like this:

<tr class="even"> <td>..</td> </tr>
<tr class="odd"> <td>..</td> </tr>
<tr class="even"> <td>..</td> </tr>
<tr class="even" style="display:none"> <td>..</td> </tr>
<tr class="odd" style="display:none"> <td>..</td> </tr>
It works fine.

But here is the real problem, it does not work with Datatable "Sort". The row alternate color breaks with sorting.

I found one close solutions was to use :
table.display tr.odd
{
background: none repeat scroll 0 0 #EBEBEB;
height: 27px;
}

table.display tr.even
{
background: none repeat scroll 0 0 #F7F7F7;
height: 27px;
}

But it does not work for me. Or I am not implementing it right, because datatable rows never shows this class in fire bug.
Any guidance link will be very helpful to me.

Thanks