As clicking on action, we can access different buttons triggering different actions on the row (within a dropdown menu )
The change of row color is based on conditions relative to the column values ; this changing will be done with the "rowCallBack" function(row, data) on Datatables options - cf. https://datatables.net/reference/option/rowCallback
If you want to specify conditions based on column values, you have to apply conditions based on row["column value"] :(cf. Column option on Datatables) ; As with Bootstrap, the color of the row can be specify by applying value for the "class" attribute within the <td> tag , here we will be $(row).addClass jQuery function (cf. http://api.jquery.com/addclass/) to alter the coilor of the rows:
Here is the function that we have defined :
"rowCallback": function( row, data ) {
if (row["status_fraud"].substring(0,3)=="0" && row["Statut_Cmd"].substring(0,1)!=="0") {
//$(row).css({"background-color":"#FFDCDC"});
$(row).addClass( 'danger' )
}
return row;
},
You can also change the background cell (here below for the fifth column cell) only using this command :
$('td', row).eq(5).addClass('danger');
The dropdown menu action is based on Bootstrap using various classes such as "btn-group", "dropdown-menu" etc... (cf. http://getbootstrap.com/components/#btn-dropdowns-split), This way we can re-define column value using "render" function ( data, type, row ) on columnDefs "datatables" option.
"columnDefs":[
{
"render": function ( data, type, row ) {
var BtnReader='<a target="_blank" class="btn btn-success btn-sm" role="button" href="view.php?id=' + data + '"> Read' + "</a>" ;
var BtnDelete = '<a target="_blank" class="btn btn-danger btn-sm" role="button" href="delete.php?id=' + data + '"> Delete ' + ' </a>';
var DropDownAction= '<div class="btn-group">'
+
'<button class="btn btn-warning btn-sm dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="false">'
+
'<i class="fa fa-gear"></i><span class="caret"></span>'
+
'</button><ul class="dropdown-menu" role="menu">';
DropDownAction += '<li>' + BtnReader+ '</li>';
DropDownAction += '<li>' + BtnDelete + '</li>';
DropDownAction +=' </ul></div>';
return DropDownAction;
},
"targets": [7]
}
]
The code for adding action using buttons within table rows has been shown on a previous post as well as the way to show color labels depending on the row properties:
"columnDefs":[
{
"render": function ( data, type, row ) {
if (data === undefined || data === null) '<span class="label label-danger">' + data + '</span>';
if (row === undefined || row === null) '<span class="label label-danger">' + data + '</span>';
if (row["PSN"].substring(0,3)=="0" && row["Statut_Cmd"].substring(0,1)!=="0")
return '<span class="label label-danger">' + data + '</span>';
else return '<span class="label label-success" >' + data + '</span>';
},
"targets": [5]
}
]
These are the HTML and JS files for this post :
HTML FILE:
[..]
<div class="col-lg-6">
<a name="tb" >
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-table fa-fw"></i> Paiements en retard</h3>
<div class="panel-body">
<table id="tb" class="table table-bordered table-hover table-striped">
<thead>
<th>PSN </th>
<th>Date commande</th>
<th>Date de dernière modification</th>
<th>Status fraud</th>
<th>Status Bank</th>
<th>Status Cmd</th>
<th>Order Origin ?</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
</div> <!-- /panel-body -->
</div> <!-- /panel-heading -->
</div> <!-- /panel-info -->
</a>
</div> <!-- /col-lg-6 -->
[..]
JS FILE :
var table_blocage_fraud_synchro = $('#tb').dataTable( {
"language": {
"url": "http://localhost/boot/js/DataTables.French.json"
},
"ajax": {
"url": "http://localhost/boot/payment.php?function=controle_paiement_retard¶m=json",
"dataSrc": ""
},
"columns": [
{ "data": "PSN" }, //0
{ "data": "date_create" }, //1
{ "data": "date_mod" }, //2
{ "data": "status_fraud" }, //3
{ "data": "status_bank" }, //4
{ "data": "Statut_Cmd" },//5
{ "data": "Order_origin" },//6
{ "data": "PSN" }, //7
],
"rowCallback": function( row, data ) {
var obj = eval(data);
//console.log(objdata);
if ((obj["status_fraud"].substring(0,3)=="0" && obj["Statut_Cmd"].substring(0,1)!=="0")) {
//$(row).css({"background-color":"#FFDCDC"});
$(row).addClass( 'danger' )
}
return row;
},
"columnDefs":[
{
"render": function ( data, type, row ) {
if (data === undefined || data === null) '<span class="label label-danger">' + data + '</span>';
if (row === undefined || row === null) '<span class="label label-danger">' + data + '</span>';
if (row["PSN"].substring(0,3)=="0" && row["Statut_Cmd"].substring(0,1)!=="0")
return '<span class="label label-danger">' + data + '</span>';
else return '<span class="label label-success" >' + data + '</span>';
},
"targets": [5]
},
{
"render": function ( data, type, row ) {
var BtnReader='<a target="_blank" class="btn btn-success btn-sm" role="button" href="view.php?id=' + data + '"> Read' + "</a>" ;
var BtnDelete = '<a target="_blank" class="btn btn-danger btn-sm" role="button" href="delete.php?id=' + data + '"> Delete ' + ' </a>';
var DropDownAction= '<div class="btn-group">'
+
'<button class="btn btn-warning btn-sm dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="false">'
+
'<i class="fa fa-gear"></i><span class="caret"></span>'
+
'</button><ul class="dropdown-menu" role="menu">';
DropDownAction += '<li>' + BtnReader+ '</li>';
DropDownAction += '<li>' + BtnDelete + '</li>';
DropDownAction +=' </ul></div>';
return DropDownAction;
},
"targets": [7]
}
]
} );
