Bootstrap Table - Add class to Row based on value inside Cell

Question

I am creating and displaying a bootstrap table based on values returned from a database:

 function showEmployeeEfficiencyTable(employeeid, date) {
    $('#emptable').html('<table id="efficiency-table" data-show-columns="false" data-toggle="table" data-filter-control="false"></table>');
    var table = $('#efficiency-table');
  table.bootstrapTable({url: '/php/emp-efficiency.php?employee=' + employeeid + '&date=' + date,
        columns: [{
            field: 'Work',
            title: 'Work',
            sortable: false,
        },{
            field: 'Task',
            title: 'Task',
            sortable: false,
        },{
            field: 'Type',
            title: 'Type',
            sortable: false,
        },{            
            field: 'Start Time',
            title: 'Start Time',
            sortable: false,
        },{
            field: 'Finish Time',
            title: 'Finish Time',
            sortable: false,
        },{
            field: 'Total',
            title: 'Total Time',
            sortable: false,
        },{
            field: 'Efficiency',
            title: 'Percentage',
            sortable: false,
        }]
    });
}

The table displays fine. However, I'm having trouble accessing the value of the efficiency field,

I am trying to set the row class to 'Green' if the value is below 100, to 'Red' if it is above 100, or ignore adding a class if the value is 0 or Null etc!

I've attempted: https://stackoverflow.com/a/36019980/10741662 & : https://stackoverflow.com/a/42055314/10741662

amongst other things,

Any help would be greatly appreciated!

Answer 1

If you try to set row color based on a specific value, you should use rowStyle function like this:

 function showEmployeeEfficiencyTable(employeeid, date) {
    $('#emptable').html('<table id="efficiency-table" data-show-columns="false" data-toggle="table" data-filter-control="false"></table>');
    var table = $('#efficiency-table');
  table.bootstrapTable({url: '/php/emp-efficiency.php?employee=' + employeeid + '&date=' + date,
        columns: [{
            field: 'Work',
            title: 'Work',
            sortable: false,
        },{
            field: 'Task',
            title: 'Task',
            sortable: false,
        },{
            field: 'Type',
            title: 'Type',
            sortable: false,
        },{            
            field: 'Start Time',
            title: 'Start Time',
            sortable: false,
        },{
            field: 'Finish Time',
            title: 'Finish Time',
            sortable: false,
        },{
            field: 'Total',
            title: 'Total Time',
            sortable: false,
        },{
            field: 'Efficiency',
            title: 'Percentage',
            sortable: false,
        }],
        rowStyle: function (row, index) {
            var customClass = "";

            if (row.Efficiency == 0 || row.Efficiency == null) {
                // do nothing
            }
            else if (row.Efficiency < 100) {
                customClass= 'success';
            }
            else if (row.Efficiency > 100) {
                customClass= 'danger';
            }

            return {
              classes: customClass
            };
          }
    });
}

By default, those classes of Bootstrap (success, danger), color the row like here:

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_table_contextual&stacked=h