i have to add multiple classes to different set of target columns

umaeswara

I see this kind of question got asked in https://datatables.net/forums/discussion/53634/multiple-class-assignation-in-columndefs-is-not-working ;

but i have list of targets, and for each set i have to give multiple class names.

say my first list is [ 1, 3, 4 ] and class need to be added is "min"
my second list of columns is [ 2,4,6] and class need to be added is "cpu"
my third list of columns is [1,2,4,6] and class need to be added is "complex"

when i defined using
"columnDefs": [{

        "className": "cpu",
        "targets": firstlist
    }, {
        "className": "min",
        "targets": secondlist
    }, {
        "className": "complex",
        "targets": thirdlist
    }, 

it doesnt work. so 4th column has always complex it doesnt have cpu and min.
it always takes the last one defined in the order. what would be the easy way to handle this scenario.

thanks,
Uma-

umaeswara

http://live.datatables.net/hupiqajo/1/edit

umaeswara

http://live.datatables.net/hupiqajo/1/edit testcase created. please help. btw my lists in actual scenario are very big arrays as i have 50 columns.
firstlist - 1,4,22,28,30,40,44,.......
secondlist - 1,12,14,16,28,32,36,40,......

classes -- mins, max, avg, total, cpu, memory, complex, natural, etc....
so i have created a simple one with only 3 lists and 6 columns.

kthorngren

Looks like your test case is working. This is what you defined:

    columnDefs: [
      {  className: "cpu", targets: [2,3] },
      { className: "min", targets: "_all" }, 
      {  className: "complex", targets: [1,2] },
      {className: "me", targets: [1,2,3]}
    ]

Inspecting the thead it looks like each column has the appropriate classes:

<tr role="row">
  <th class="min sorting sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 105px;">Name</th>
  <th class="me complex min sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 155px;">Position</th>
  <th class="me complex min cpu sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 77px;">Office</th>
  <th class="me min cpu sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 27px;">Age</th>
  <th class="min sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 68px;">Start date</th>
  <th class="min sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 43px;">Salary</th>
</tr>

Please update the test case to show the issue or tell us how to replicate the problem.

Kevin

umaeswara

Thanks Kevin for the quick reply. The header has correct class names, but not the table contents. please check the inspect the rows with actual table values.

position should have me complex min per above header information you pasted.
but "Technical Author" has only class "min" . seems like th has correct class names but not td.

thanks
Uma-

umaeswara

can you please let me know how to make the table td also have correct classnames.
thanks,
Uma-

kthorngren

Interesting. I took a look at the datatables.js code. Looks like Datatables processes the columnDefs in order. It will process{ className: "cpu", targets: [2,3] }first and process the classname options for column 2 and 3. Then it will process{ className: "min", targets: "_all" },. It looks like for each-option columnDefsoption it resets the current column options with the new but it usesaddClass()to update the-tag th` with this code:

            if ( oOptions.className && ! oOptions.sClass )
            {
                oOptions.sClass = oOptions.className;
            }
            if ( oOptions.sClass ) {
                th.addClass( oOptions.sClass );
            }

Line 3 overwrites the previous classname but line 6 appends the class to the th. That is why there is a difference. @allan and @colin can comment on whether they can make a change in this area to keep all the classnames added to a column from multiple columnDefs options.

It may be inconvenient or difficult for your solution but you will need to rearrange your columnDefs.targets arrays to add all the classnames once, like this:

columnDefs: [
  { className: "min", targets: [0, 4, 5] },
  {  className: "me complex min", targets: 1},
  { className: "me complex min cpu", targets: 2 },
  {  className: "me min cpu", targets: 3},
]

http://live.datatables.net/linanevo/1/edit

Kevin

umaeswara

Hi Kevin, thanks for looking into this issue. yes i may need to create a complex solution for this and create many number of class combinations. as i need to hide certain column groups in different situations. like all columns with class "min" ; or "complex" .
please see if we can override this function in anyway ? for adding/appending class.
i can traverse through table and add class too; but that becomes performance overhead. any help greatly appreciated.
thanks,
Uma-

kthorngren

You can also use createdRow to add the classes. Not sure if this will be easier.

Kevin

umaeswara

Hi Kevin, thanks for createdRow, i looked for similar function for column, cell. and found this. createdCell function. I have used it for adding class. and it did work. please check.
http://live.datatables.net/nuribora/1/edit
what do you think? do you see any performance overhead? i am going to add 10 different classes like this.

  columnDefs: [
      {  targets: [2,3,4] ,
      "createdCell": function (td, cellData, rowData, row, col) {
      
        $(td).addClass("cpu check") }
      },
     
      {   targets: [1,2], "createdCell": function (td, cellData, rowData, row, col) {
      
        $(td).addClass("complex") } },
      {className: "me", targets: [1,2,3]}
    ]

thanks,
Uma-

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Yep, that would do the trick!

Colin

umaeswara

Hi Colin, Kevin,
it seems like still there is a problem. if you see the column 2, it should have me comple cpu and check as its classes but it has only me cpu check. it didnt have complex.
any help. and this method is consuming so much time,.

i have 2 properties compile and run. for each of these i have 4 values min, max, avg, total. so checking the header title and adding class compile min, compile max, run min, run max etc. like that is becoming so overwhelming. any other suggestion.

in the table declaration any other method i can use to check the title name and for the entire column append a class name easily?

thanks,
Uma-

colin

In the test case you posted before, http://live.datatables.net/nuribora/1/edit , there isn't mention of a "compile" class, so I'm not surprised you wouldn't see it

I'm not clear why you can't add it as you have before. The columns.createdCell also passes in the row's data, so you can add conditional classes there too.

Can you update the test case to reflect what you want, please, as I'm not clear what the issue is.

Colin

umaeswara

Hi Colin,
thanks for reply. with current testcase , if you see for the column 2 cpu, check, complex and me classes should have been added, but it is not. i used createdCell but still the issue persist. please advice.
thanks,
Uma-

colin

Ah, I see what you mean. That's because column 2 has two entries in columnDefs, so only the first one is being run - each column can't be defined multiple times so you'll need to add more logic into entry.

Colin

umaeswara

I use different logic now. instead of adding classes for each column and then using the class to hide a group of columns. i used following method.

$('table').dataTable().api().columns().every(function() {
var col = this;
if (col.visible()) {
var colname = $(this.header()).text();
if (colname.match(grpname))
{
col.visible(false);
}
}

});

but this every function is taking long time.

umaeswara

The ‘content’ attribute of Window objects is deprecated. Please use ‘window.top’ instead. jquery.dataTables.min.js:27:199
onmozfullscreenchange is deprecated. jquery.dataTables.min.js:27:199
onmozfullscreenerror is deprecated. jquery.dataTables.min.js:27:199

​

colin

Could you update the test case to demonstrate this please. And sorry about your repeated messages, the spam filter decided to jump in!

Colin

umaeswara

Hi Kevin, Colin,
today while discussing other issue i was educated about column(string:name) Thanks kevin and when looked at other possibilities. I saw this
var table = $('#example').DataTable();
var column = table.column(':contains(Salary)');
so Can I use this and my multiple classes to different columns ??

​

kthorngren

You can use something like this $( (column).nodes() ).addClass('myClass');, for example:
http://live.datatables.net/kobunofo/1/edit

If you inspect the age you will see the header does not have the class but all the td in the column does. It uses column().nodes() and use a call to jQuery to add the class.

Kevin