Tuesday, October 22, 2019

DataTable.js, Change the Color of Row based on the Cell Value

DataTable.js, Change the Color of Row based on the Cell Value


Suppose you wants to change the color of Table Row on the bases of column value, then we have to use rowCallback as the below code

rowCallback: function (row, data, index) {
            if (data[3] ==="some value") {
                $(row).css('color', 'red');
            }           
        }

This code should be used like the below:

var table = $('#TableName').DataTable({
        'paging': true,
        'lengthChange': true,
        'searching': true,
        'ordering': true,
        'info': true,
        'autoWidth': false,
        'ajax': 'JsonData.json',
        'columnDefs': [{
            'targets': -1,
            'data': null,
            'defaultContent': 'html">'
        }],
        dom: 'Bfrtip',
        buttons: [{
            extend: 'colvis',
            text: 'Hide/Show Columns',
            columnText: function (dt, idx, title) {
                return (idx + 1) + ': ' + title;
            }
        }],
        rowCallback: function (row, data, index) {
           if (data[3] ==="some value")  {
                $(row).css('color', 'red');
            }
        }
    })

No comments: