Hide a column in a table based on the value of another column

Gargiucn

I have a table with column "col1" that contains all values = 1 when "col2" is to be displayed and all values = 0 when "col2" is to be hidden.
I can't seem to do this.
I have tried with:

initComplete: function () { 
   let col2view = domTable
     .column( 1 )
     .data()
     .filter( function ( value, index ) {
         return value == 0 ? true : false;
     } )
     .count();
   if ( col2view == 0 ) {
     domTable.column(2).visible( false );
   }
....

Any advice is important...

Thank you,
Giuseppe

kthorngren

The domTable variable probably hasn't been defined yet as the Datatable initialization process hasn't completed until initComplete is done. Use this.api() to get an instance of the API. Something like this:

initComplete: function () {
   let api = this.api();
   let col2view = api
     .column( 1 )
     .data()
     .filter( function ( value, index ) {
         return value == 0 ? true : false;
     } )
     .count();
   if ( col2view == 0 ) {
     api.column(2).visible( false );
   }
....

Kevin

Gargiucn

Thank you for your reply.
I tried your modification but it still doesn't work.
The value of "col2view" always remains 0...

kthorngren

That suggests the return value == 0 ? true : false; comparison is wrong or you don't have a value 0 in the column. Please provide a link to your page or a simple test case replicating the issue so we can take a look. Or do some debugging of the filter() function to see what is happening.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Gargiucn

Here it is...

https://live.datatables.net/veqewugi/1/edit

Thank you,
Giuseppe

kthorngren

You have all 1 in the column. So the filter() you have will return 0 rows so campo1 will be 0. Based on your first post if the column has 1 you want to display the column not hide it. So change the second if statement to if ( campo1 !== 0 ), like this:
https://live.datatables.net/jubutopu/1/edit

Kevin

Gargiucn

I would like "Col2" to be visible when "Col1" = 1 and hidden when "Col1" = 0
However, it always returns "campo1" = 0 and this is my problem....

kthorngren

I updated your test case to have a 0 in the column. Note that when using DOM sourced data the numbers are actually strings not numeric so you either need to compare to a string ( value === "0" ) or use == so it will compare to either string or numeric ( value == 0 ). Updated example:
https://live.datatables.net/jubutopu/3/edit

Kevin

Gargiucn

Thank you very much for your patience and helpfulness.
I think I have figured out the problem: I am probably looking for a value in a column that is initially set as visible: false.
Is there any way to solve the problem?

allan

No - it shouldn't make any difference since you are using the DataTables API to get the data there.

Doesn't Kevin's example not match what you are looking for? Perhaps you can modify it to show the specific issue you are having.

Allan

Gargiucn

I apologize for the delay in responding.
Kevin's example works great but not in my application.
My control column must contain either all values 0 or all values 1.
When there are 0 values I hide a second column.
Unfortunately I keep getting a value of 0 regardless of the value in the control column.
But now I have a doubt: I use a parent/child editor type schema (using bootstrap 4 tabs) and initComplete of the child table (the one whose columns I am interested in showing/hiding), is executed before I can select a row from the parent table.
Could this be the problem? If so where should I place my column().data().filter()?

Giuseppe

allan

If the example works, but your own use of it doesn't, we'd really need to see your own page, or have the example modified to show the issue.

Could this be the problem? If so where should I place my column().data().filter()?

It shouldn't be. If the data is in the data that is loaded in for the table, then it will still be accessible, even if not immediately shown in the table.

Allan

Gargiucn

I want to try to explain why I am afraid the method is not suitable for my needs.
As I mentioned I use a parent/child schema.
Suppose I have two "parent" rows each of which has three "child" rows.
The three "child" rows paired with the first "parent" row have the column "Col1" with all values equal to 0 because I don't want to display the column "Col2", while the three "child" rows paired with the second "parent" row have the column "Col1" with all values equal to 1 because the column "Col2" must be visible.
The result of:

initComplete: function () { 
    var api = this.api();       
    var campo1 = api
        .column( 0 )
        .data()
        .filter( function ( value, index ) {
            return value == 0 ? true : false;
        } )
        .count();
        alert(campo1);
        if ( campo1 != 0 ) {
            api.column(1).visible( false );
        }
  }

displays the value 3 as soon as I open the page because it counts all the rows (containing 0 and 1 values) in the table while I should do the check after selecting the "parent" row.
I hope I haven't put you to sleep with my explanation...

Giuseppe

kthorngren

I think I understand. So this code is for the child table?

If yes then instead of using initComplete, which runs at initialization, use drawCallback for the child table which will run each time the child table is drawn.

Kevin

Gargiucn

It works!
I put in drawCallback what I had written for initComplete.

drawCallback: function( settings ) {
    var api = this.api();       
    var testo2enable = api
        .column( 11 )
        .data()
        .filter( function ( value, index ) {
            return value == 0 ? true : false;
        } )
        .count();
        alert("testo2enable: "+testo2enable);
        if ( testo2enable != 0 ) {
            // testo2enable returns 0 if all values = 1
            // testo2enable returns a value > 0 if all values = 0
            api.column(4).visible( false );
        }
 }

Thank you very much!

Giuseppe