i want to add a class to a column but createdRow addClass is overwriting

Mwhite007

i am using

 createdRow: function ( tr ) {
        $(tr).addClass('data');
      },

to add a class to each row that is added to the table but i want to add a class to one of the columns. i tried

columnDefs { className:"textSmall", "targets":[6]} 

and "className":"textSmall" on that column in the table definition but all that is superseded by the createdRow function.

colin

Hi @Mwhite007 ,

This example here may help.

    createdRow: function(row, data, dataIndex, cells) {
      $(row).addClass('myRow');
    },
    columnDefs: [{
      targets: 1,
      className: 'myColumn'
    }]

This gives the following

<tr class="myRow odd" role="row">
            <td class="sorting_1">Brielle Williamson</td>
            <td class=" myColumn">Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$4,525</td>
          </tr>

The class added to the row doesn't affect the class added to the column. Note though that the row class is for the entire row, the <tr> element, and not on each of its child <td> elements.

Hope that helps,

Cheers,

Colin

Mwhite007

thank you Colin for your help. this code does indeed add the .textSmall class to that cell but when i "inspect" the cell the .textSmall class is crossed out so it's not applied

colin

We're happy to take a look if you can create a test case or link to your page. Feel free to use my example as a basis, and modify that.

allan

It will be to do with the specificity for your CSS - in this case something will have a higher selector than the textSmall class.

You could try:

.textSmall {
  font-size: 10px !important;
}

which will almost certainly fix it, but it might be an idea to find out the selector that is applying a font size and then overrule that with a more specific selector.

Allan