Adding a class to a row on DataTables initialization

Loren Maxwell

Is there a way to identify criteria to add a class to a <tr> to highlight certain rows on initialization?

rf1234

Here is an example from my own coding: Based on conditions I highlight certain rows (bold font) and make certain rows selectable. See rowCallback and the selector for the select extension in which I limit selectability to the rows with a certain class and exclude the first column.

var cashFlowTable = $('#tblCashFlow').DataTable({
    dom: "Bfrltip",
    ajax: {
        url: 'actions.php?action=tblCashFlow',
        type: 'POST',
        data: function (d) {
            var selected = contractTable.row({selected: true});
            if (selected.any()) {
                d.contract_id = selected.data().contract.id;
            }
        }
    },
    pageLength: 50,
    lengthMenu: [5, 10, 20, 50, 100, 200, 500],
    columns: [
        {data: "cashFlowElement",
            render: function (data, type, row) {
                return renderCashFlowElement(data);
            }
        },
        {data: "cashflow.payment_date",
            render: function (data, type, row) {
                return renderCashFlowPaymentDate(data, row.cashflow.position);
            }
        },            
        {data: "cashflow.interest_date"},
        {data: "cashflow.amount_remaining",
            render: function (data, type, row) {
                return renderAmountCurrency(data, row.cashFlowCurrency);
            }
        },
        {data: "cashflow.rate",
            render: function (data, type, row) {
                return renderCashFlowRate(data, row.cashflow.position);
            }
        },
        {data: "cashflow.rate_fixing_date"},
        {data: "cashflow.repayment",
            render: function (data, type, row) {
                return renderAmountCurrency(data, row.cashFlowCurrency);
            }
        },
        {data: "cashflow.interest",
            render: function (data, type, row) {
                return renderAmountCurrency(data, row.cashFlowCurrency);
            }
        },
        {data: "cashflowFeePrice",
            render: function (data, type, row) {
                return renderAmountCurrency(data, row.cashFlowCurrency);
            }
        },
        {data: "cashflow.total_amount",
            render: function (data, type, row) {
                return renderAmountCurrency(data, row.cashFlowCurrency);
            }
        },
        {data: "cashflowAccum",
            render: function (data, type, row) {
                return renderAmountCurrency(data, row.cashFlowCurrency);
            }
        },
        {data: "cashflow_has_accrual.inc_exp_old_year",
            render: function (data, type, row) {
                return renderAmountCurrency(data, row.cashFlowCurrency);
            }
        },       
        {data: "cashflow_has_accrual.inc_exp_new_year",
            render: function (data, type, row) {
                return renderAmountCurrency(data, row.cashFlowCurrency);
            }
        },
        {data: "cashflow_has_derivative_asset_liability.asset_liability_remaining",
            render: function (data, type, row) {
                return renderAmountCurrency(data, row.cashFlowCurrency);
            }
        },
        {data: "cashflow_has_derivative_asset_liability.amortization",
            render: function (data, type, row) {
                return renderAmountCurrency(data, row.cashFlowCurrency);
            }
        },        
        {data: null, //manual or additional repayment
            render: function (data, type, row) {
                return renderManual(row);
            }
        }
    ],
    columnDefs: [
        { targets: "noSort", orderable: false },
        { targets: "hiddenCols", visible: false},
        {   targets: "cnt", className: "text-center"}
//            { type: 'formatted-num', targets: "fN" }
    ],
    order: [[2, 'asc'], [1, 'asc']],
    select: {
        style: 'single',
        selector: 'tr.selectRow td:not(:first-child)'
    },
    buttons: [
        {extend: "createRepayment", editor: cashFlowRepaymentEditor, className: "editorOnly"},
        {extend: "editRepayment", editor: cashFlowRepaymentEditor, className: "editorOnly"},
        {extend: "removeRepayment", editor: cashFlowRepaymentEditor, className: "editorOnly"},   
        {extend: "editCashFlow", editor: cashFlowEditor, className: "editorOnly"},
        {extend: "pdfCashflow", 
            title:    function () { return cfTitle; },
            filename: function () { return cfFilename; },
            messageBottom: function() {
                return tableFooter + cashFlowTable.rows().count();
            }
        },
        {extend: "excelCashFlow",
            title:    function () { return cfTitle; },
            filename: function () { return cfFilename; },
            messageBottom: function() {
                return tableFooter + cashFlowTable.rows().count();
            }
        },
        {extend: "csvCashFlow", 
            filename: function () { return cfFilename; }
        },
                 "colvis"                 
    ],    
    rowCallback: function (row, data) {
        if ( data.cashflow.manual > 0 || data.cashflow.additional_repayment > 0 ) {
            $(row).addClass('fontThick');
        }
        //if it is not the summation row the row should be selectable
        if ( data.cashflow.position !== 'L' ) {
            $(row).addClass('selectRow');
        }
    }
});

and the CSS for "fontThick":

.fontThick {
    font-weight: bold;
}

SaH

Thank you, but when I sort my table the "data" does not get sorted, thus resulting that my highlights is one of.

How is this fixable?

kthorngren

This question is answered in this thread:
https://datatables.net/forums/discussion/57940/sorting-breaks-rowrender#latest

Kevin