Highlight an entry in row if contains pattern

Highlight an entry in row if contains pattern

nitinb82nitinb82 Posts: 12Questions: 3Answers: 0

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!

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 2,817Questions: 0Answers: 490

    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

  • nitinb82nitinb82 Posts: 12Questions: 3Answers: 0

    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.

  • kthorngrenkthorngren Posts: 4,031Questions: 19Answers: 885

    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

  • nitinb82nitinb82 Posts: 12Questions: 3Answers: 0
    edited November 8

    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!

  • kthorngrenkthorngren Posts: 4,031Questions: 19Answers: 885
    Answer ✓

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

    Kevin

  • nitinb82nitinb82 Posts: 12Questions: 3Answers: 0

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

  • nitinb82nitinb82 Posts: 12Questions: 3Answers: 0

    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!

  • kthorngrenkthorngren Posts: 4,031Questions: 19Answers: 885

    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

  • nitinb82nitinb82 Posts: 12Questions: 3Answers: 0

    That worked! Thank you so much, Kevin!

Sign In or Register to comment.