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

Gargiucn · March 2023

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 · March 2023

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 · March 2023

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

kthorngren · March 2023

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 · March 2023

Here it is...

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

Thank you,
Giuseppe

kthorngren · March 2023

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 · March 2023

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 · March 2023

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 · March 2023

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 · March 2023

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 · March 2023

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 · March 2023

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 · March 2023

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 · March 2023

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 · March 2023

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

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

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

Answers

Howdy, Stranger!

Categories

DataTables

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

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

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables