make row bold given a cell value

dukebart

Hi,

I'm looking for a way to make the last row in my datatable bold (for each cell). My table is populated through JSON data.

I tried the following code but this doesn't work:

        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            /* All cells in 4th row will be bolded  */
            if ( iDisplayIndex == 3 ) {
                $('td', nRow).each(function(){
                               $(this).html( '<td><b>'+$(this).text()+'</b><td>' );
                            });
            }
            return nRow;
        },

Any thoughts?

Bart

kthorngren

One option may be to use a class. Change your $(this).html to:
`$(this).addClass('bold');'

And add this style:

.bold {
  font-weight:bold;
}

Kevin

dukebart

No luck,

I tried this code found here on datatables.net:

                    rowCallback: function( row, data, index ) {
                      if ( data[2] == "Totaal" ) {
                        $('td:eq(2)', row).html( '<b>' + data[2] + '</b>' );
                      }
                    },

But this also doesn't work..

Bart

kthorngren

Here is your original example working with the changes. If you are still having trouble please post a test case with the issue.

Kevin

rogera

Can probably be done by using a class on the table and css selectors if it's always the last row or a specific rownumber instead of of using rowCallback.

We use a class called MarkTotal to set the last row bold. We use bootstrap so some classes should be changed if using some other styling.

<table class="table table-condensed table-striped table-bordered MarkTotal">

And the css, don't remember if !important is necessary or not but we have it!

.MarkTotal tbody tr:last-child {
    font-weight: bold !important;
}

dukebart

Hi Kevin,

This works but what I want is the whole row to be bold when the cell of the third column has value "Totaal".

Is that possible?

Bart

dukebart

Hi,

I figured it out. I used this and this works:

                    fnRowCallback: function(nRow, aData, iDisplayIndex) {
                        if (aData.contract_partij == 'Totaal') {
                            $('td', nRow).each(function(){
                                $(this).addClass('bold');
                            });
                        }
                        return nRow;
                    }

"contract_partij" is obviously the column name of my JSON datasource

dukebart

Many thanks!