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

GargiucnGargiucn Posts: 104Questions: 29Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited 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

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    Here it is...

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

    Thank you,
    Giuseppe

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    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....

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    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?

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    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

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    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

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    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

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    Answer ✓

    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

  • GargiucnGargiucn Posts: 104Questions: 29Answers: 0

    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

Sign In or Register to comment.