Conditional colVis function

samot80

https://live.datatables.net/kojunuce/1/edit**:
**Debugger code (debug.datatables.net) ajowur:
**Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('{
') contains HTML space characters, which are not valid in tokens.
at https://cdn.datatables.net/2.0.5/js/dataTables.min.js:4:10000
at Array.forEach (<anonymous>)
at D (https://cdn.datatables.net/2.0.5/js/dataTables.min.js:4:9965)
at S (https://cdn.datatables.net/2.0.5/js/dataTables.min.js:4:25280)
at s (https://cdn.datatables.net/2.0.5/js/dataTables.min.js:4:26002)
at Et (https://cdn.datatables.net/2.0.5/js/dataTables.min.js:4:33778)
at O (https://cdn.datatables.net/2.0.5/js/dataTables.min.js:4:6955)
at HTMLTableElement.<anonymous> (https://cdn.datatables.net/2.0.5/js/dataTables.min.js:4:7142)
at Function.each (https://code.jquery.com/jquery-3.7.1.min.js:2:3129)
at ce.fn.init.each (https://code.jquery.com/jquery-3.7.1.min.js:2:1594)**:

**Conditional colVis function.

I have been using Datatables, specifically with version 1.13.9 and I want to update to version 2.0.5, but I have had problems.

I have a table in which I use Colvis to hide some columns, so that they are not visible to some users, according to their profile. To hide it I use a function: for example:

columnDefs: [
{
target: 5,
visible: false,
title:'Salary',
searchPanes: { show: false },
className: function (data, type, row) {
// Check the value of isEmployee and apply the 'noVis' class if it is true
console.log(isEmployee);
return isEmployee ? 'noVis': '';
}
}
]

If the user is an employee, they cannot see the salary column, otherwise it will be displayed.
I adapted this small example in the hope that it can be clearer. https://live.datatables.net/kojunuce/1/edit

The funny thing is that in this scenario in live.datatables it works but not on my site.

I have also set up my productive site in another url to display the error https://php.soytomas.com/pedidoswp.php

Note. The only way it works on my productive site with version 2.0.0 or higher is by declaring the class directly, but I couldn't hide that column anymore, according to the user profile:

{target: 19,
visible: false,
title:'Price',
searchPanes: { show: false },
className: 'noVis'

/function (data, type, row) {
// Check the value of isClient and apply the 'noVis' class if it is true
console.log(isCustomer);
return isClient ? 'noVis': '';
}/
}

I hope I make myself understood, I am a newbie to programming and my level of English is basic.**:

kthorngren

I tried you test case with 1.13.11 and the class is applied based on the value of isEmployee in this optoin:

    className: function (data, type, row) {
    // Verifica el valor de `isEmployee` y aplica la clase 'noVis' si es `true`
      console.log(isEmployee);
      return isEmployee ? 'noVis' : '';
      }
    } 

https://live.datatables.net/kojunuce/3/edit

looking at the columns.className docs it states that it expects only a string not a function. I suspect that since columns.className expects only a string that something has changed in the code causing the DOMTokenList error.

You can use a ternary expression, like this:

className: isEmployee ? 'noVis' : ''

https://live.datatables.net/kojunuce/4/edit

Kevin

samot80

Hello, @kthorngren thank you very much for your response, which was excellent. You were right. I have tried it in my scenario and it works perfectly. I appreciate the time you took to answer me.

Best regards.

kthorngren

Glad to help!

Kevin