Changing colour of cells after column hiding ?

Khalid Teli

Hi,
In my datatable I am using rowcallback function to change colour of some cells based on the data :

 "rowCallback": function( row, data, index ) {

      if (($(row).find('td:nth-child(14)').text()) < 0 )  {
                $('td:eq(13)', row).addClass('diff_color');
              }
             if (($(row).find('td:nth-child(20)').text()) >0 )  {
                $('td:eq(19)', row).addClass('value_color');
              }

              if (($(row).find('td:nth-child(21)').text()) >0 )  {
                $('td:eq(20)', row).addClass('value_color');
              }
            } ,

However when I use DrawCallback function to hide some columns base on condition, it doesn't seem to work well with column hiding

 drawCallback: function () {
        var sum = $('#agreement').DataTable().column(12).data().sum(); 
      }, 

       "drawCallback": function () {
             var tabletwo = $('#agreement').DataTable();

                     var api = this.api();

                            tabletwo.columns().every( function () {
                            var columnHeader = api.columns().header();
                              var columnHeader = $(this.header()).text();

                             if (columnHeader == "0"){

                                                              this.visible(false);

                            }

                             else  {
                                                      this.visible(true);

                             }
                        });
               },

How can I fix this so the rowcallback function works well with column hiding?

Thank you in advance

kthorngren

See if using column().index() using the visible parameter in the rowCallback. Then replace thetd:nth-child(14)with somethingtd:nth-child(' + visIndex +')wherevisIndex is the result of the -api column().index()`.

Kevin

Khalid Teli

Hi @kthorngren

Used this but it doesnt seem to work

     var idx = agreementTable.column( 14 ).index( 'visible' );
      if (($(row).find('td:nth-child('+idx+')').text()) > 0 )  {
                $('td:eq(13)', row).addClass('diff_color');

              }

Thank you

kthorngren

What happens?

Have you debugged the values of idx?

Do you also need to do the same with $('td:eq(13)', row)?

Kevin

Khalid Teli

Hi @kthorngren
Tried to debug and I think I found the issue:

 var idx = agreementTable.column(14).index('visible');
  var idxx = agreementTable.column(13).index('visible');

//console.log(idx);

  if (($(row).find('td:nth-child('+idx+')').text()) > 0 )  {
            $('td:eq('+idxx+')', row).addClass('diff_color');
          }

Do you also need to do the same with $('td:eq(13)', row)?

this did the trick.

The problem is when the column on which the operation is being performed is hidden. For example, in my case if column 14 is hidden and then when I try to make it visible again , the console.log(idx) is NULL and hence doesn't work.

kthorngren

Please provide a test case showing the problem so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I updated the example from your other thread an it works when making a column visible.
http://live.datatables.net/lequreko/1/edit

Kevin

Khalid Teli

Hi @kthorngren

In the example you provided, if you do this console.log(table.column(1).index('visible')) it outputs null

That is exactly what is happening, with my example , some times based on the condition in callDrwabackfunction the column (14) gets hidden too and that is when the output of console.log(idx) is null

         var idx = agreementTable.column(14).index('visible');

i am trying my best to produce a test case which replicates the issue

THANK YOU

kthorngren

if you do this console.log(table.column(1).index('visible')) it outputs null

Yes, if you have that column hidden then there is no visible index. Plus you won't be able to use the jQuery selector td:eq(13) to add the class.

For the ($(row).find('td:nth-child(14)').text() part just use the data parameter, of the rowCallback function, to access the column data via Datatables instead of trying to access a td that might be hidden.

Kevin

Khalid Teli

@kthorngren thank you.

 var abc = agreementTable.cells(null, 14).render('display');

  var idxx = agreementTable.column(13).index('visible');

  if (abc[0] > 0 )  {
            $('td:eq('+idxx+')', row).addClass('diff_color');
          }

I have implemented this and accesses the column data via datatable.

How should I deal with $('td:eq('+idxx+')', row).addClass('diff_color'); because it is hidden sometimes as well based on condition and when it is hidden the
console.log(idxx) output is null which is creating issue.

colin

Kevin may reply, but I'm not following that thread. Could you update that test case to demonstrate the problem, please.

Colin

Khalid Teli

I have tried my best to replicate the issue and here is the link :
live.datatables.net/favivicu/1/edit

     "rowCallback": function( row, data, index ) {
  if (data[3] > 0 )  {
            $('td:eq(5)', row).addClass('diff_color');
          }
     }

When you hide the column (age) the addClass is not reflected on the next page
Thank you

kthorngren

See this example:
http://live.datatables.net/favivicu/2/edit

I changed it to hide the Age column, looks like that is what you intended to do. Also added the use of column().index() with the visible parameter. Look at the console. It shows rowCallback runs before drawCallback.

In your example the addClass('diff_color') is applied initially to td:eq(5) because it is in the DOM. Then rowCallback. runs an hides the column. Go to Page 2 the column is already hidden so td:eq(5) is not in the DOM.

In my example the index is based on the visible index and is applied appropriately.

Kevin

Khalid Teli

Hi @kthorngren

Thank you very much. I understand that index is based on the columns which are visible.

How will one approach to a problem, when the column in question is not visible?

I am sorry if I am not able to explain properly, I have update the example to replicate the issue:

live.datatables.net/dahiloka/1/

1) when you open the link and run it, it works fine. As the salary column colour is change

2) if you hide the salary column using the column hide button salary at top and then go to page 2 , the change is not reflected

I can understand the reason for the change not being reflected because index is based on visible columns only

Is there a way to reflect the change even if the column is hidden at initialization ?

Thank you

kthorngren

When you look at the console you will see the null output from your rowCallback. Then you will see the drawCallback runs and makes the column visible since its not Age.

Instead of using rowCallback you will need to loop through the rows after adjusting the column visibility in drawCallback. Use rows().every() with a selector-modifier of {page: "current"}. In the loop use cell().node() to get the td to use addClass(). See this example:
http://live.datatables.net/dahiloka/2/edit

Kevin

Khalid Teli

@kthorngren
that you very much for your support.

You guys are amazing!