datatable colorize all lines containing a searched item

datatable colorize all lines containing a searched item

messaoudmessaoud Posts: 4Questions: 3Answers: 0

Hi all ,is there an api in dataTable that allows you to look up the values in the table and then color the entire row or is without erasing the rest of the rows?

This question has accepted answers - jump to:

Answers

  • schwaluckschwaluck Posts: 103Questions: 27Answers: 1
    Answer ✓

    Hi,
    if you want to color a whole row, you can use the rowCallback-Function.
    Attached is an example which changes the text color based on a value within one cell:

            rowCallback: function (row, data) {
                if (data.YOUR_COLUMN === 'YES') {
                    $(row).css('color', 'green');
                    $(row).css('font-weight', 'bold');
                }   
                       //You could add a else here, if needed
            },  
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    Yep, as @schwaluck said, and here's an example, just press "load data" to get the data there,

    Colin

  • messaoudmessaoud Posts: 4Questions: 3Answers: 0

    the problem the filter applies only on the first page it does not retrieve all the values of the array in dataTable and if we go to the second page we must create an event to filter .this is my example:

     $(document).ready(function() {   
         var table = $("#cerbere_id").DataTable({   
             "rowCallback": function(row, data) {  
                 $(".occurence").each(function(index) {   
                     $(this).on('click', function() {   
                         var value = $(this).text();  
                         highLight(value, row);   
    
                     })   
                 });   
    
            function highLight(value, row) {
                $(row).css('background-color', 'unset');
                $(row).css('font-weight', 'unset');
    
                if (data[2] === value) {
                    $(row).css('background-color', 'lightblue');
                    $(row).css('font-weight', 'bold');
                }
            }
    
        }
    });
    

    });

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

Sign In or Register to comment.