How to use Complex header in column visibility ( Toggle) buttons using datatables.

How to use Complex header in column visibility ( Toggle) buttons using datatables.

Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

Hello.. I would like to use column visibility toggle buttons for few columns. I used complex header and each header have same named sub columns. I want to make toggle button with the name of complex header column and want to hide and show sub columns ( Planned, Forecast, Actual column) when user click on toggle button. Right now I used columnsToggle which only display sub column names (3 toggle buttons). Here is my code. Thank you.

<table id='assyntCx_Table' class='stripe row-border order-column' style="width:100%">
          <thead>



                        <th class='text-center', rowspan="2">Location</th>
                        <th class='text-center', rowspan="2">Drawing ID</th>
                        <th class='text-center', rowspan="2">Status </th>


                        <th class='text-center', colspan="2">Levels</th>
                        <th class='text-center', colspan="3">Mechanical/Side COP Mechanical Drawings</th>



            </tr>

        <tr class=''>

                        <th class='text-center'>Higher</th>
                        <th class='text-center'>Lower</th>
                        <th class='text-center'>Planned</th>
                        <th class='text-center'>Forecast</th>
                        <th class='text-center'>Actual</th>




              </tr>
            </thead>
        </table>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" language="javascript" class="init">


var editor;


$(document).ready(function() {



  var editor = new $.fn.dataTable.Editor( {
    ajax: "../ajax/at/elevators.php",
    table: "#assyntCx_Table",
    template: '#customForm',
    fields: [ 



    { 
        label: 'assetid', 
        name: 'E.assetid',
        type: 'hidden',


    },

    { 
        label: 'Location', 
        name: 'Location',
        type: 'select',
        //attr:{disabled:true},

        placeholderDisabled: false,
        placeholder: "Select location"

      },

    { 
        label: 'Drawing ID', 
        name: 'A.dwgTag',
       // type: 'readonly',
        //attr:{disabled:true},


    },

    { 
        label: 'Higher', 
        name: 'Higher',
        type: 'select',
        placeholderDisabled: false,
        placeholder: "Choose Level"


    },
    { 
        label: 'Lower', 
        name: 'Lower',
        type: 'select',
        placeholderDisabled: false,
        placeholder: "Choose Level"


    },

    // { 
    //     label: 'Status', 
    //     name: 'E.elevatorStatus',
    //     type: 'select',
    //     placeholderDisabled: false,
    //     placeholder: "Select Status"


    // },

      { 
        label: 'Planned', 
        name: 'MSDPlanned',
        type:   'datetime',


      },
      { 
        label: 'Forecast', 
        name: 'MSDForecast',
        type:   'datetime',


      },

      { 
        label: 'Actual', 
        name: 'MSDActual',
        type:   'datetime',


      },



    ],
    formOptions: {
            main: {
                scope: 'cell' // Allow multi-row editing with cell selection
            }
        },


  } );




  var table = $('#assyntCx_Table').DataTable( {
    dom: "lBfrtip",



    //AJAX
    //serverSide: true,
    processing: true,
    ajax: {
      url: "../ajax/at/elevators.php",
      type: "POST",
      deferRender: true,
    },

    //TABLE WINDOW
    scrollY:        "65vh",
    scrollX:        true,
    scrollCollapse: false,
    paging:         true,
    fixedColumns:   {
      left: 3
    },

    columns: [

      { data: "Location" },

      { data: "A.dwgTag"},

      { data: "Status"},

      //{ data: "E.assetid" },

      { data: "higherlevel"},

      { data: "lowerlevel"},



      {data: "MSDPlanned",
        class: "toggle"

      },


      { data: "MSDForecast",
        class: "toggle"
      },

      { data: "MSDActual",
        class: "toggle"
      },


],


select: true,

//stateSave: true,   


buttons: [  ],


     //PAGINATION OPTIONS
    "pageLength": 250,
    "lengthMenu": [[50, 100, 250, 500, -1], [50, 100, 250, 500, "All"]],

  } );

  var permission = '<?php echo $role ?>';

  //console.log(permission);

  if (permission > 20) { 


    table.button().add(
      null, { extend: "edit", editor: editor },

    );

    table.button().add(
      null, { 

          extend: "columnsToggle", 
          columns: '.toggle',

      },
    );

    table.button().add(
      null, { extend: "excel" },
    );

  }


if (permission == 40) {         // Columns editable by SuperAdmin

    editor.enable(

        [
            'Location',
            'A.dwgTag',

        ]  );

}

else  {                         // Columns not editable by Users

    editor.disable(

        [
            'Location',
            'A.dwgTag',

        ]  );

}

} );

</script>
<?php require('../includes/fileend.php') ?>

Replies

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    This is my output picture. Instead of 3 toggle button I want Toggle button called "Mechanical/Side COP Mechanical Drawings" - which can hide and show 3 sub columns (Planned , Forecast, Actual) when user click on that button.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    This example here should help, it's showing how to groups columns like you're after,

    Colin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0
    edited January 2022

    Hi @colin I already tried using 'colvisGroup' but it is not toggle button. If I use colvisGroup its only perform one action at a time.. for e.g. Hide button will hide columns and show button will show columns. But I want to develop toggle button with the name of "Mechanical/Side COP Mechanical Drawings" which hide and show subcolumns using one button only.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I think we need to see an example of this, and an explanation of what pressing the button does. Because you're using rowspan in the header, you would need to hide all columns under the span, otherwise the styling will get messed up.

    Colin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @colin so here I just mentioned one column as an example - "Mechanical/Side COP Mechanical Drawings". But I need to make toggle buttons for multiple columns.

    This is what I did using 'colvisGroup'.

    buttons: [
    
        {
            extend: 'colvisGroup',
            text: 'Hide',
            //show: [0, 1, 2, 3, 4],
            hide: [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
    
        },
        {
            extend: 'colvisGroup',
            text: 'Show all',
            show: ':hidden'
        }
    
    
    ],
    

    Now as you know I made complex header using colspan rowspan...

    <table id='assyntCx_Table' class='stripe row-border order-column' style="width:100%">
              <thead>
    
                <tr class=''>
                            <th class='text-center', rowspan="2">Location</th>
                            <th class='text-center', rowspan="2">Drawing ID</th>
                            <th class='text-center', rowspan="2">Status </th>
    
    
                            <th class='text-center', colspan="2">Levels</th>
                            <th class='text-center', colspan="3">Mechanical/Side COP Mechanical Drawings</th>
                            <th class='text-center', colspan="3">Original cab & Side COP Cab</th>
                            <th class='text-center', colspan="3">Entrance Drawings</th>
                            <th class='text-center', colspan="3">Fixture Drawings</th>
                            <th class='text-center', colspan="3">Start of Fabrication based on drawings Approval</th>
                            <th class='text-center', colspan="3">Fabrication forecast based on Start of Install</th>
                            <th class='text-center', colspan="3">Arrival at Caledonia</th>
                            <th class='text-center', colspan="3">Arrival at Site</th>
                            <th class='text-center', colspan="3">Start Install</th>
                            <th class='text-center', colspan="3">PICO Complete</th>
                            <th class='text-center', colspan="3">TSSA Inspection Date</th>
                            <th class='text-center', colspan="3">CTSC Inspection Date</th>
                            <th class='text-center', colspan="3">SAT</th>
    
                            <th class='text-center', rowspan="2">Updated By</th>
                            <th class='text-center', rowspan="2">Last Updated </th>
    
    
                </tr>
    
            <tr class=''>
    
                            <th class='text-center'>Higher</th>
                            <th class='text-center'>Lower</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
                            <th class='text-center'>Planned</th>
                            <th class='text-center'>Forecast</th>
                            <th class='text-center'>Actual</th>
    
    
    
                  </tr>
                </thead>
            </table> 
    

    I want to make toggle button for these 7 columns I mentioned below .. which can Hide and show subcolumns ( named planned, forecast, actual) for each of this.

         <th class='text-center', colspan="3">Mechanical/Side COP Mechanical Drawings</th>
                                    <th class='text-center', colspan="3">Original cab & Side COP Cab</th>
                                    <th class='text-center', colspan="3">Entrance Drawings</th>
                                    <th class='text-center', colspan="3">Fixture Drawings</th>
                                    <th class='text-center', colspan="3">Start of Fabrication based on drawings Approval</th>
                                    <th class='text-center', colspan="3">Fabrication forecast based on Start of Install</th>
                                    <th class='text-center', colspan="3">Arrival at Caledonia</th>
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Datatables knows about the th elements that are in the row with the sorting elements. As Colin explained the other headers you will need to show/hide using Jquery or Javascript methods. You can use the column-visibility event to see which columns were hidden or made visible. You can then hide or show the corresponding th elements.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @colin here I add HTML and JS code

    live.datatables.net/cosuqeci/1/edit

    I dont exactly apply CSS as we stored css in different file.

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren using column-visibility Event will display which columns were hidden or made visible. But I want to make Toggle Button for first 7 complex header which can hide group of subcolumns for each 7 complex header.

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    Is there any way that I can use "columnsToggle" and "colvisGroup" together to achieve what I am looking for ?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Thanks for the test case, but it doesn't run so we can't see the issue you want support with. Please can you take a look at that,

    Colin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @colin I am sorry I am fetching data from database and not sure how I can set up everything in test case. Here is the link I made page public.. Let me know are you able to view it or not.

    https://test.assettrack.cx/elevators/ele1.php

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    The page has this error:

    DataTables warning: table id=assyntCx_Table - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

    Your header structure looks similar to this example. My suggestion is to start with that example. I copied the HTML tab from the example into this test case:
    http://live.datatables.net/qirecoze/1/edit

    I used the Download Builder to generate the proper CDN for colvis. If I understand correctly you want to toggle multiple columns. I used a Custom Button and columns().visible() to toggle the columns within the HR group. Note use of the singular column().visible() to get the current visibility of a column with in the group.

    If this isn't what you are looking for please try updating the test case to help us understand the requirements.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren Thank you so much for your help. Really appreciate. I tried same code and I am able to 'Hide' custom button but when I click again its not showing back hidden data. For e.g. in your example when you click on "HR Info button" first time it hides the group of column within HR info.. and when click again it displays those info again. But in my case its not showing.

    Here is my Code

    buttons: [
    
    
        {
            text: 'Mechanical/Side COP Drawings',
            action: function ( e, dt, node, config ) {
              // Track visibility with the fist column in the group
              var columnsVisible = dt.column(1).visible();
    
              // Toggle the visibility of all cloumns in the group
              dt.columns( [5,6,7] ).visible( ! columnsVisible );
            }
        },
    
        // {
        //     extend: 'colvisGroup',
        //     text: 'Hide',
        //     //show: [0, 1, 2, 3, 4],
        //     hide: [ 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
    
        // },
        // {
        //     extend: 'colvisGroup',
        //     text: 'Show all',
        //     show: ':hidden'
        // }
    
    
    ],
    
  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren I am sorry my bad. Now I am able to successfully toggle the custom buttons. I am wondering as I have to make 7 buttons it will not look nice. Is there any way to make collection of all button in one button ? so when user click on that button it will display list of all custom buttons..so user can choose what ever column they want to hide or show ?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited January 2022

    See this collections example. Sounds like this is what you want.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    @kthorngren Omg.. yes exactly thats what I want. Thank you so much you made my day.

Sign In or Register to comment.