Highlight an entry in row if contains pattern

nitinb82

Hi,
New to DataTables so please pardon if a re-post.
Is it possible to highlight an entry (either bold or different color) in a row if it contains a pattern? Eg.,
Make the 3rd entry bold if it contains a 'G'.
T/G G/G **A/G** NA A/A NA

To take it further, is it possible to make only 'G' appear in bold (and not 'A')?
T/G G/G A/**G** NA A/A NA
Thanks so much!

colin

Hi @nitinb82 ,

This example here will show you how to highlight cells conditionally. You'll just need to use standard JS regex magic to determine whether to highlight it.

Cheers,

Colin

nitinb82

Thanks, colin. I tried the following simple thing, but it does not work. Can you please tell me if there is anything wrong?
I am trying to make the entry in the 4th column bold if it is above 25.

                    $(document).ready(function() {
                    $('#samples').DataTable({
                       "createdRow": function ( row, data, index ) {
                            if ( data[3] > 25 ) {
                                $('td', row).eq(3).addClass('bold');
                            }
                       }              
                       "order": [[ 7, "desc" ]],
                    });

Thanks in advance for any help.

kthorngren

You should be seeing a syntax error in the browser's console. You need a comma at the end of line 7 before ""order":.....

Do you have a class for bold, something like this?

.bold {
  font-weight:bold;
}

Kevin

nitinb82

Thanks Kevin, that comma actually renders the table well. So, that part is fixed.
But, being a newbie at DataTables, I don't know where do I specify the class bold. Can I specify it somewhere in the block above (9 lines)?

Can I directly say it as follows?
$('td', row).eq(3).addClass(font-weight:bold)

Thanks for all your help!

kthorngren

You can use the jQuery css() method. Something like this:
$('td', row).eq(3).css('font-weight','bold');

Kevin

nitinb82

It worked! This is very helpful. Thanks, Kevin!

nitinb82

Hi Kevin, I am struggling to create such highlighting function for multiple columns:

$(document).ready(function() {
$('#samples').DataTable({
   "createdRow": function ( row, data, index ) {
        if ( data[3] > 25 ) {
            $('td', row).eq(3).addClass('bold');
        }
   }     
"createdRow": function ( row, data, index ) {
        if ( data[4] > 100 ) {
            $('td', row).eq(4).addClass('bold');
        }
   }             
   "order": [[ 7, "desc" ]],
});

In the above case, it only highlights the 4th column. How can I get it to highlight both (or more) columns depending upon the two thresholds?

Thanks in advance!

kthorngren

The second createdRow you have is overwriting the first. You will need both if statements in one createdRow. Something like this:

   "createdRow": function ( row, data, index ) {
        if ( data[3] > 25 ) {
            $('td', row).eq(3).addClass('bold');
        }
        if ( data[4] > 100 ) {
            $('td', row).eq(4).addClass('bold');
        }
   }   

Kevin

nitinb82

That worked! Thank you so much, Kevin!