Search and filter, then highlight rows based on other criteria

alcatravis

I am using the search filters API extension like this:

    $.fn.dataTable.ext.search.push(
      function( settings, data, dataIndex ) {
        var val = data[4];
        if (val > 0) return true;
        return false;
      }
    )

I would then like to apply highlighting to rows matching other criteria, like:

    if ( data[6] == 'Australia')  {
      $('td', row).css('background-color', 'red');
    }

I am not sure how to do this within the API.

I can get the row highlighting working if I make it part of the rowCallback on the table initialisation - e.g.

    $(document).ready(function() { 
            $('#jobs').DataTable({ 
              'rowCallback': function( row, data, index ) {
                if (data[6] == 'Australia') {
                  $('td', row).css('background-color', 'red');
                }
              }
            ,
            'paging': false, 
            'order': [[5, 'asc']]
            }); 
    }

In this example, all data is highlighted with column(6) has value "Australia".
However, I only want the highlighting to show up after the filter has been applied.

kthorngren

One way to know if the table is filtered is by using page.info(). Maybe something like this will work for you:

          'rowCallback': function( row, data, index ) {
            var api = this.api();
            var pageInfo = api.page.info();
            var isFiltered = pageInfo.recordsDisplay < pageInfo.recordsTotal
            if (isFiltered && data[6] == 'Australia') {
              $('td', row).css('background-color', 'red');
            }
          }

Kevin

colin

Hi @alcatravis ,

Yep, as Kevin said - I was just about to post the same thing moreorless. Take a look at this example here, I did it in the drawCallback, but otherwise the same thing.

Cheers,

Colin