Hide multiple columns based on condition

Khalid Teli

I am using a drawCallback function, trying to hide the columns with empty header name.

     "drawCallback": function ( settings ) {

                   $('#contracts thead tr th').each(function() {

               var head = $(this).text();
                          console.log(head);
                if (head == "") {

                                     table.columns().visible(false);

                                }
                                 else  {

                                      table.columns().visible( true );


                      }
            }); 

I tried using multiple logics but nothing worked out. Whenhead=" " it tends to hide all columns, but I just want to hide columns with empty column header names

Your help will be highly appreciated
Thank you

kthorngren

You will probably only want to do this once, not for each table draw, in the initComplete callback.

table.columns().visible(false);

Using columns() without a column-selector will result in selecting all the columns. I suggest you use columns().every() to loop through each column. In the loop use column().header() to get the header. Here is an example of what you want:
http://live.datatables.net/kiqibemi/1/edit

Kevin

Khalid Teli

@kthorngren
Thank you!
Because the table heading change every time the value is selected in dropdown menu (this is just a requirement) so it has to redraw with each selection.

You example works perfect , I just put it insidedrawcallback function`` like:

 "drawCallback": function () {
                                        var api = this.api();



                            table.columns().every( function () {
                            var columnHeader = api.columns().header();
                              var columnHeader = $(this.header()).text();



                             if (columnHeader == "") {


                                this.visible(false);
                            }

                             else  {

                               this.visible( true );

                             }
                        });
                  },

This is how I approache dit earlier

  "drawCallback": function () {
                    var api = this.api();

                        api.columns().flatten().each(function (colIdx) {
                            var columnHeader = api.columns(colIdx).header();

                             if ($(columnHeader).text() == "") {


                                api.columns(colIdx).visible(false);
                            }

                             else  {

                               api.columns(colIdx).visible( true );

                             }
                        });
                  },

Thank you for your help! As always, appreciate it