Mark some rows depending on database contents

lol_user

Hello
I need to know is that possible to have some row marked in the table according to the value of some field in the database .
For example: the table shows me the result of the following select:
"select sysname,address,ip,active from AAA ";
I want to highlight(or mark) those rows , whose corresponding data have 'active=0' and not mark those with 'active=1'

F12Magic

Seems like another similar question in the forum here:
https://datatables.net/forums/discussion/38212/table-row-conditional-styling#latest

I posted an example there too.

And here is another codepen example, making use of columns.createdCell which I only recently found.
Codepen example

lol_user

Thank you very much,
columns.createdCell works though I only managed to chahge the color of <td> and cannot find how to change the color of a whole row...

columnDefs: [
    { 
       'targets': 0,
       'createdCell': function (td, cellData, rowData, row, col) {
           if ( cellData == '0' ) {
              $(td).css('background-color', 'pink')
           }
         searchable: false,
         visible: true
    }
]

F12Magic

The row parameter in the function call, gives you the index number of the table row where the current cell check is done. So you have to use that, but remember that it is zero based. If you use this row index in css then you have to add 1 to it. Example:

"createdCell": function(td, cellData, rowData, row, col) {
        if (cellData == '0') {
          var rowIndex = row+1;
          $($('#example tbody tr:nth-child('+rowIndex+')')).css('background-color','pink');
        }

You can replace #example with your table id or if you used a class, the classname.

lol_user

Thank you very much. But for some reason it does not work. Just no any changes in table view. Though with 'td' it works..

$(function() {
    var table = $('#devices-table').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        ajax: '{!! route('datatables.data') !!}',
        select: true,
        scrollY:450,
         lengthMenu: [ 10, 25, 50, 75, 100, 200, 500, 1000, 3000 ],
         pageLength: 25,
         pagingType: 'full_numbers',
        dom: '<"wrapper">flirptB',
        buttons: [ 'copy', 'excel', { extend: 'pdf', orientation: 'landscape' }, 'print'],
        columnDefs: [
            {
                 'targets': 0,
                 'createdCell': function (td, cellData, rowData, row, col) {
                     if ( cellData == '0' ) {
                          var rowIndex = row+1;
//                        $(td).css('background-color','pink');
                          $($('#devices-table tbody tr:nth-child('+rowIndex+')')).css('background-color','pink');
                     }
                 },
             searchable: false,
             visible: true
         }
       ],
        columns: [
            { data: 'xxx', name: 'devices.active' },
            { data: 'sysname', name: 'sysname' },
            { data: 'city', name: 'city'},
            { data: 'ddd', name: 'devtypes.description'},
            { data: 'address', name: 'address'},
            { data: 'description', name: 'description', searchable: 'false'},
            { data: 'ip', name: 'ip' },
        ],
    });

F12Magic

I see only 2 possibilities here. Maybe ScrollY has something to do with it, but I doubt that. The other is that the css for the table row is overruled. In the latter case, try making a css class like:

.rowPink{
    background-color: pink !important;

Make sure that the css file where this is in, is loaded last. And then change the js to this:

"createdCell": function(td, cellData, rowData, row, col) {
        if (cellData == '0') {
          var rowIndex = row+1;
          $($('#example tbody tr:nth-child('+rowIndex+')')).addClass('rowPink');
        }

lol_user

Still no success. It seemes this construction with 'tr:nth...' has completely no effect.
Thank you anyway.