Question

83

DataTables: How to set classes to table row cells (but not to table header cells!)

rated 0 times [ 86] [ 3] / answers: 1 / hits: 54727 / 12 Years ago, mon, june 11, 2012, 12:00:00

i have a really nice style for my tables.

{ sorry links no more working }

I had to add sClass so that new rows (added by fnAddData) get the right classes.

Unfortunately that ruins my layout, becouse these classes are also added to my table-header cells!

{ sorry links no more working }

How can I configure sClass to apply only for TBODY cells?

To clarify:

  var rolesTable = $('#roles').dataTable({

      aoColumns: [

        { mDataProp: id, sClass: avo-lime-h avo-heading-white },

        { mDataProp: name, sClass: avo-light },

        { mDataProp: module, sClass: avo-light },

        { mDataProp: description, sClass: avo-light },

        { mDataProp: null, bSearchable: false, bSortable: false, 

          sDefaultContent: '<button type=button name=add class=btn><i class=icon-plus icon-white></i></button>' }, 

      ],

  }); // end od dataTable

This way when i call

rolesTable.fnAddData( { 

    id: 10, 

    name: testname, 

    module: testmodule, 

    description: testdescription 

} );

then the added row looks like this:

<tr>

    <td class=avo-lime-h avo-heading-white>10</td>

    <td class=avo-light>testname</td>

    <td class=avo-light>testmodule</td>

    <td class=avo-light>testdescription</td>

    <td></td>

</tr>

AND that is perfectly OK

** the problem is ** that this setting also adds these classes to:

<thead>

    <tr> (...) </tr>

</thead>

table head cells... which I do not want

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

analiseb

Add To Favorites

Follow

Total Points: 252

Total Questions: 96

Total Answers: 106

Location: Singapore

Member since Sat, Jul 25, 2020

4 Years ago

analiseb questions

1 Cypress Best Practice - Store and compare two values

Tue, Sep 28, 21, 00:00, 3 Years ago

1 Cannot set property '' of undefined angular

Tue, Oct 6, 20, 00:00, 4 Years ago

1 Refresh page on this.props.history.push with same url

Tue, Jun 30, 20, 00:00, 4 Years ago

1 VUE - data object is passed as a reference always or sometimes it is copied?

Fri, May 8, 20, 00:00, 4 Years ago

1 Can Javascript spread operator include undefined fields of an object?

Wed, Jan 16, 19, 00:00, 6 Years ago

View All

answered 12 Years ago kalias · Accepted Answer

Solution to my problem was: useing fnRowCallback instead of sClass to set classes to new rows.

  var rolesTable = $('#roles').dataTable({

      aoColumns: [

        { mDataProp: id },

        { mDataProp: name },

        { mDataProp: module },

        { mDataProp: description },

        { mDataProp: null, bSearchable: false, bSortable: false, 

          sDefaultContent: '<button type=button name=add class=btn btn-round><i class=icon-plus icon-white></i></button>' }, 

      ],

      fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {

          $('td:eq(0)', nRow).addClass( avo-lime-h avo-heading-white );

          $('td:eq(1),td:eq(2),td:eq(3)', nRow).addClass( avo-light );

        }

  }); // end od dataTable