add class to dynamic created columns

add class to dynamic created columns

Khalid TeliKhalid Teli Posts: 251Questions: 71Answers: 0

Hi,
I am struggling to assign column name based on column header to dynamically generated columns using:

Here I am checkif the ``columnName == 'vORD', then assing a class='test' to it
for (var i in columnNames) {

               if  (columnNames[i] === 'vORD')   {
                          columns.push({data: columnNames[i],title: columnNames[i]});
                          columns.className = 'test';
                     }
                     else{
     columns.push({data: columnNames[i],title: '<div><span>'+columnNames[i]+'</span></div>'});

                     }

 }

Then I want to use this column class to add color to column background:

    "createdRow": function( row, data, dataIndex ) {
   if ( data.vORD > 0 ) {
     $('td.test', row).addClass('colorCheck');

    }
}

I have been trying hard but failed to come up with any solution.

Thank you

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited January 2022

    Place the classname in the object, like this:

                  if  (columnNames[i] === 'vORD')   {
                             columns.push({data: columnNames[i],
                                  title: columnNames[i]},
                                  className: 'test'
                             );
                        }
    

    Kevin

  • Khalid TeliKhalid Teli Posts: 251Questions: 71Answers: 0

    @kthorngren
    Than you. Works perfect.

    However, when in column defs I try to render the data using this class name , it doesn't work: For example :
    {"target":"test","render":function(data,type,row,meta){return GBPFormatter.format(data)}},

    But if is use _all to select all columns , it works fine

    {"target":"_all","render":function(data,type,row,meta){return GBPFormatter.format(data)}},

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited January 2022 Answer ✓

    However, when in column defs I try to render the data using this class name , it doesn't work

    I can see that. You are asking Datatables to apply the classname to the columns and at the same time look for those columns using that same classname.

    I would look at using a global variable that contains an array of indexes that you apply the classname to. Then use that variable as the columnDefs.targets. For example:

    var classTestIndexes = [];  // Defined before Datatables init code.
    
    .......
    if  (columnNames[i] === 'vORD')   {
               columns.push({data: columnNames[i],
                    title: columnNames[i]},
                    className: 'test'
               );
               classTestIndexes.push( i );
          }
    

    Then use classTestIndexes for the columnDefs.targets.

    Kevin

  • Khalid TeliKhalid Teli Posts: 251Questions: 71Answers: 0

    @kthorngren amazing, works perfect.
    Thank you very much. as always appreciate your help.

    Kind Regards
    KT

Sign In or Register to comment.