style individual datatable cell or row - Make bold text

Question

I am trying to dynamically create rows onto a table. Depending upon an entity field 'isBold', I may want to style the row or cell bold (the entire row would be bold, so it doesnt really matter if its cell or row). When I get the Json data into the JQuery function, i have the following code present the table

function FillTimeEntriesTable(timeEntries)
    {
        var table = $("#time_entries-table").DataTable();
        table.clear();
        for (var i = 0; i < timeEntries.length; i++) {
            if (timeEntries[i].IsBold == true) {
                table.row.add([
                    '<td class="table-bold" nowrap>' + timeEntries[i].Date + '</td>',
                    '<td>' + timeEntries[i].Activity != null ? timeEntries[i].Activity : " " + '</td>',
                    '<td>' + timeEntries[i].Notes != null ? timeEntries[i].Notes : " " + '</td>',
                    '<td class="align-right table-bold">' + timeEntries[i].Hours + '</td>',
                    '<td></td>',
                    '<td class="align-right table-bold">' + timeEntries[i].ExtraTime + '</td>',
                    '<td></td>',
                    '<td class="table-bold" nowrap>' + timeEntries[i].DayTotals + '</td>',
                    '<td>' + timeEntries[i].RowParity + '</td>'
                ]);
            } else {
                table.row.add([
                    timeEntries[i].IsItalic ? '<td class="table-italic">' + timeEntries[i].Date + '</td>' : '<td nowrap>' + timeEntries[i].Date + '</td>',
                    '<td>' + timeEntries[i].Activity != null ? timeEntries[i].Activity : " " + '</td>',
                    '<td>' + timeEntries[i].Notes != null ? timeEntries[i].Notes : " " + '</td>',
                    '<td class="align-right">' + timeEntries[i].Hours + '</td>',
                    '<td></td>',
                    '<td class="align-right">' + timeEntries[i].ExtraTime + '</td>',
                    '<td></td>',
                    '<td>' + timeEntries[i].DayTotals + '</td>',
                    '<td>' + timeEntries[i].RowParity + '</td>'
                ]);
            }
        }
        table.dra

the timeEntries is a list of reference data that, in the for loop, allows use of the fields in the reference data type. it is printing out correctly, except of course, for the styling. It is supposed to be bold where isBold is true (which,m during debugging, is hitting inside when correctly read) BUT WHEN I INSPECT ELEMENT the page, it only shows the td and the value (NO class in-line declarations... not table-bold, align right, nowrap, etc..) . I'm using datatables JQuery with MVC 5. Any help would be appreciative, Thanks,

Answer 1

I found it myself, Thank you though. I just used the fnRow fucntion as such

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    if (aData[8] === "odd") {
                        $(nRow).css({ "background-color": "#dadada" });
                    }
                    else {
                        $(nRow).css({ "background-color": "#ffffff" });
                    }
                    if (aData[0] === 'Week Total') {
                        $(nRow).css({ "font-weight": "bold" });
                    }
                    else {
                        $(nRow).css({ "font-weight": "normal" });
                    }

I don't EXACTLY understand how it works yet, but id does as it sounds. The header of the method is what i am trying to understand, but that just takes a bit of time. As for the Question snippet, I got rid of the '

if (aData[0] === 'Week Total') {

could read it as 'Week Total' and not '

Answer 2

Think your issue is related to Datatable -- are you using this table.row.add method properly? I found this documentation: https://datatables.net/reference/api/row.add(). Its not clear that you can pass in attributes on your table cells in this manner. It looks like you need to change CSS properties via javascript after drawing the rows.

A more direct approach would be using jQuery itself to build your table, which can be done with just a few tweaks to your original function:

function FillTimeEntriesTable(timeEntries)
    {
        var table = $("#time_entries-table");
        // remove all rows from tbody
        table.find('tbody').empty();
        for (var i = 0; i < timeEntries.length; i++) {
            if (timeEntries[i].IsBold == true) {
                var new_row_html = '<tr>' +
                    '<td class="table-bold" nowrap>' + timeEntries[i].Date + '</td>' +
                    '<td>' + timeEntries[i].Activity != null ? timeEntries[i].Activity : " " + '</td>' +
                    '<td>' + timeEntries[i].Notes != null ? timeEntries[i].Notes : " " + '</td>' +
                    '<td class="align-right table-bold">' + timeEntries[i].Hours + '</td>' +
                    '<td></td>' +
                    '<td class="align-right table-bold">' + timeEntries[i].ExtraTime + '</td>' +
                    '<td></td>' +
                    '<td class="table-bold" nowrap>' + timeEntries[i].DayTotals + '</td>' +
                    '<td>' + timeEntries[i].RowParity + '</td>' + '</tr>'
                ;
            } else {
                var new_row = '<tr>' +
                    timeEntries[i].IsItalic ? '<td class="table-italic">' + timeEntries[i].Date + '</td>' : '<td nowrap>' + timeEntries[i].Date + '</td>' +
                    '<td>' + timeEntries[i].Activity != null ? timeEntries[i].Activity : " " + '</td>' +
                    '<td>' + timeEntries[i].Notes != null ? timeEntries[i].Notes : " " + '</td>' +
                    '<td class="align-right">' + timeEntries[i].Hours + '</td>' +
                    '<td></td>' +
                    '<td class="align-right">' + timeEntries[i].ExtraTime + '</td>' +
                    '<td></td>' +
                    '<td>' + timeEntries[i].DayTotals + '</td>' +
                    '<td>' + timeEntries[i].RowParity + '</td>' + '</tr>'
                ;
            }
            table.find('tbody').append(new_row);
        }