Changing row colors according to value of some columns from a separate method

sumitshining

Hi,

I have a method to render the datatable. The same method is used to render it on different pages with different content.
For a specific page I need to customize my rows by adding background colors to those with a specific value in one of the columns. So, I can't specify anything like creating customized class names to the rows, etc. I need to add a separate method where this task shall be accomplished. How shall I proceed?

ulrike

I would do something like that :

[code]
$('tbody td').each( function () {
if ( $(this).text().indexOf("the text you are searching for") >= 0 ) {
$(this).parent('tr').addClass('specialColor'); // this targeting may not work with FixedColumns
}
});
[/code]

sumitshining

It won't help much. I actually need to mark those rows red in which ratio of two specific columns is greater than 5. Thus, I need to access the datatable to execute this query.

ulrike

You could probably do this using Javascript, replacing this line
[code]
if ( $(this).text().indexOf("the text you are searching for") >= 0 ) {
[/code]
with something more suitable.
Why don't you create a test case on live.datatables.net ?

sumitshining

This is the first time I am using dataTables and is the first time I am on this website. Still exploring it.

sumitshining

This logic of yours would loop through all the cells and convert parent "tr" to red. But I need to calculate ratio of two columns in a row. How to do that? I am able to achieve it when I implement the logic in the code where the data table in generated using fnRowCallback. How to do it here. I am still confused.

ulrike

Can you put up an example on live.datatables.net?

sumitshining

http://live.datatables.net/ewemuz/2/edit

ulrike

Hello,

you should probably check the function fnGetData.
I guess this is what you need to get the data out of a table cell, put it into a variable, so you can calculate the ratio : http://datatables.net/api
When you initialize the table do it that way :
[code]var oTable = = $('#example').dataTable({});[/code]
so you can access all data using the oTable variable later on.

For example, looping through all rows :

[code]
var total = oTable.fnSettings().fnRecordsTotal();
for(i = 0; i < total; i++) {
var row = oTable.fnGetData(i);
console.log(row);
}
[/code]

But as you will see in the documentation, you may access TDs directly too.
Hope this helps.

sumitshining

The problem seems to be a bit different. The code initialising the table is in different file (as it is being shared by other files too). The code I have to write is in other file. This custom method should be called after the table is generated but it is actually being called before it. I tried using fnRowCallback and fnRowCreated, etc but none helped. So, because of this, it gets nothing on the nodes.

Further, it asks to use bRetrieve or bDestroy. When I use these nothing happens. The problem remains same.

The page actually loads in two parts. At first, the page is rendered and then, the table is rendered through an ajax call. Can this be the problem?

allan

Please link us to a test page showing what you've got so far ( http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read ). fnRowCallback is what I would use myself to format a row / cell based on content.

Allan

sumitshining

Allan,

I have updated the test case, http://live.datatables.net/ewemuz/5

sumitshining

Well, the code is working for me this way but with a slight problem.
[code]$('body').ajaxComplete(function() {
var datatable = $('#orders-table').dataTable();
var total = datatable.fnSettings().fnRecordsTotal();
for(i = 0; i < total; i++) {
console.log(i);
var row = datatable.fnGetData(i);
if(row == null)
return;
if(row[12]/row[13] > 5){
$('td', row).css('background-color', '#FFDDDD');
}
//return row;
}
});
[/code]

The problem is, all the rows turn red if any of them satisfy the condition. What shall be done?