Format Data for display and add edit delete buttons on server side script

SalmanS

Hello everyone,

I just want to retrieve columns and convert a column value 1 to "Active" and "Not Active" for empty and null value.

1. I would like to add edit and delete button and assing the record value to this button, for crud purpose.

Code below : Server side script

$primaryKey = 'id';

$columns = array(
    array( 'db' => 'first_name', 'dt' => 0 ),
    array( 'db' => 'last_name',  'dt' => 1 ),
    array( 'db' => 'address',   'dt' => 2 ),
    array( 'db' => 'phone', 'dt' => 3,),
    array( 'db' => 'status', 'dt' => 4,,
        'formatter' => function( $d, $row ) {

//Not sure what to do here my status field might contain 1 or null or empty as a value and I would like to say 1 = "Active" and null or empty to "Not Active". can i also make this value background as red and green.

      }

    array( 'db' => 'date_of_birth','dt' => 6,
        'formatter' => function( $d, $row ) {
            return date( 'd-m-Y', strtotime($d));

Further at each row, I would like to show edit, delete buttons with glyphicons and assign the record value, so once clicked it opens the respective record in a modal window.
}
)

        );

SalmanS

something like this

$active = '';
    if($row['active'] == 1) {
        $active = '<label class="label label-success">Active</label>';
    } else {
        $active = '<label class="label label-danger">Deactive</label>'; 
    }

    $option1 = '<a type="button" data-toggle="modal" data-target="#editMemberModal" onclick="editMember('.$row['id'].')"> <span class="glyphicon glyphicon-edit"></span> Edit</a>';
    $option2 = '<a type="button" data-toggle="modal" data-target="#removeMemberModal" onclick="removeMember('.$row['id'].')"> <span class="glyphicon glyphicon-trash"></span> Remove</a>';

SalmanS

I found some more relevant information, where i can change the background color to anything using jquery, but still unable to find how i can use if condition and change he value of the column.

$(document).ready(function (){
    var table = $('#example').DataTable();

    table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {       
        var cell = table.cell({ row: rowIdx, column: 0 }).node();
        $(cell).addClass('warning');        
    });
});

. warning {
background-color: #F99 !important;
}

SalmanS

I am getting closer. still need some help.

var oTable = $('table.data-table').DataTable({ 
    rowCallback: function(row, data, index){
    if(data[3]> 11.7){
        $(row).find('td:eq(3)').css('color', 'red');
    }
    if(data[2].toUpperCase() == 'EE'){
        $(row).find('td:eq(2)').css('background-color', 'beige');
    }
  }
});

.data-table-container {
padding: 10px;
}

.dt-buttons .btn {
margin-right: 3px;
}

SalmanS

more closer..

$(document).ready(function() {
    $('#example').DataTable( {
        "createdRow": function ( row, data, index ) {
            if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {
                $('td', row).eq(5).addClass('highlight');
            }
        }
    } );
} );

SalmanS

data_replace = data.replace(/\//g, '_');

SalmanS

"columnDefs": [ {
"targets": 3,
"createdCell": function (td, cellData, rowData, row, col) {
if ( cellData == "Active" ) {
$(td).css('color', 'green')
}
if ( cellData == "Inactive") {
$(td).css('color', 'red')
}
}
} ]

SalmanS

var table = $('#example').dataTable({
    //...
    columnDefs : [
        { targets : [4],
          render : function (data, type, row) {
             return data == '1' ? 'Active' : 'Not Active'
          }
        }
   ]
})   

or

columnDefs : [
        { targets : [4],
          render : function (data, type, row) {
            switch(data) {
               case '1' : return 'Active'; break;
               case '2' : return 'Not Active'; break;
               default  : return 'Unknown';
            }
          }
        }
   ]

SalmanS

@allan need some help please.

I am almost there, now i would like to do two things. one replace the value to active and change the background color of the return column

var table = $('#example').dataTable({
    //...
    columnDefs : [
        { targets : [4],
          render : function (data, type, row) {
             return data == '1' ? 'Active' : 'Not Active'
          }
        }
   ]
})  


    $active = '';
        if($row['active'] == 1) {
            $active = '<label class="label label-success">Active</label>';
        } else {
            $active = '<label class="label label-danger">Deactive</label>'; 
        }

SalmanS

Finally I reached to this point where i can get active and not active. but

return data i would like to set in a label.

@Allan to the rescue

return data == '47' ? '<label class="label label-success">'+'Active'+'</label>':'<label class="label label-success">'+data+'</label>'

Any suggestion is highly appreciated.

kthorngren

Its a bit confusing where you are at and what you are trying to do. Maybe you can post a test case with a description of what you want to do.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin