CODEWITHSUNDEEP
jqueryhtmlcssdatatables
neuquen
neuquen

Reputation: 4169

jQuery DataTables plugin: Make specific row bold

I'm using the JQuery DataTables plugin found here. I'd like to make a specific row bold (a Totals row). How can I do so?

Right now I am trying to apply the CSS using mRender. I've tried fnRowCallback and also tried using .addClass instead of .css. Nothing seems to work.

JS:

"mRender": function (data) {
   if (data == "Totals") {
       $('#tblStatistics tbody tr td').css('font-weight', 'bold');
   }
   return data;
},

My HTML is something like the below:

<table id="tblStatistics">
  <thead></thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    <tr>
  </tbody>
</table>

Upvotes: 0

Views: 9321

Answers (4)

Paulo C&#233;sar Martins Santos
Paulo C&#233;sar Martins Santos

Reputation: 21

"fnRowCallback": function (nRow) {
     $(nRow).css("font-weight", "bold");
}

Upvotes: 2

William Ballesteros
William Ballesteros

Reputation: 1011

This works for me

oTable = $('#datatables').dataTable({
                "fnRowCallback": function (row, data, index) {
                    if ( data.status === "2") {
                        $(row).addClass('highlight');
                    }
                },
                "bProcessing": true,
                "aaData": dataTab,
                "aoColumns": [{ "mDataProp": "state" }, { "mDataProp": "S_key_name" }, { "mDataProp": "nombre" }, { "mDataProp": "solicitante_id" }, { "mDataProp": "S_register_date" }, { "mDataProp": "S_desired_date" }, { "mDataProp": "T_Fecha_Estimada" }, { "mDataProp": "S_solicit_priority" }, { "mDataProp": "Edit" }],
                "sPaginationType": "bootstrap",
                "aaSorting": [[5, "desc"]],
                "bJQueryUI": true
            });

Image working

enter image description here

Upvotes: 0

Jakotheshadows
Jakotheshadows

Reputation: 1515

try

"fnRowCallback": function (nRow, aData, iDisplayIndex) {
    if(iDisplayIndex == 3 /*Alternative Condition: aData[0] == "Totals"*/) {
        $(nRow).css('font-weight', 'bold');
    //OR
        $(nRow).addClass('yourCssClassHere');
    }
}

Don't use mRender for row highlighting. mRender is for columns. Use fnRowCallback for styling particular rows. If fnRowCallback wasn't working for you, please show us what you tried with fnRowCallback.

Upvotes: 0

Goran.it
Goran.it

Reputation: 6299

You can use fnRowCallback like this :

$(document).ready(function() {
    $('#example').dataTable( {
        "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;
        },
        "aoColumnDefs": [ {
                "sClass": "center",
                "aTargets": [ -1, -2 ]
        } ]
    } );
} );

JSFIDDLE - Click here for demo

Upvotes: 1

Related Questions