Column visibility with Dynamic tables

Khalid Teli

Hi,
I was suing one of the @colin examples https://datatables.net/forums/discussion/47784/dynamic-footer-and-sum-only-some-columnsto dynamically populate table footer using footer Callback . It works fine but the column visibility doesn't seem to work with this:

1 ) when I use the columDefs to hide some columns, the table footers doesn't hide with columns resulting in mismatch of columns to footers.

2 )Also, each time a table is redrawn, the newly created table footer gets appended to previous ones which results in multiple rows of table footers.

             "footerCallback": function ( row, data, start, end, display  ) {
  var api = this.api();
        var footer = $(this).append('<tfoot><tr></tr></tfoot>');
        this.api().columns().every(function () {
            var column = this;
            let ourSum = ''
         if ($(column.header()).hasClass('sum')) { // <--- check ???
                  var sum = column
                    .data()
                    .reduce(function(a, b) {
                      var x = parseFloat(a) || 0;
                      var y = parseFloat(b) || 0;
                      return x + y;
                    }, 0);
            } else {
               sum = "";
            }
            $(footer).append('<th>'+sum+'</th>');
        });
             }

Thank you

kthorngren

1 ) when I use the columDefs to hide some columns, the table footers doesn't hide with columns resulting in mismatch of columns to footers.

When Datatables initializes it looks for a footer. If it finds one it will handle the visibility and other functions of the footer. If its added after initialization then Datatables doesn't know about it and doesn't do any processing of the footer. You can either dynamically add it before initialization or you will need to use something like column().visible(), in the loop to see if the column is visible on line 7.

2 )Also, each time a table is redrawn, the newly created table footer gets appended to previous ones which results in multiple rows of table footers.

You need to check for the footer's existence to determine if you need to add a footer. Something like this example from this thread.

Kevin

Khalid Teli

@kthorngren Thank you

2 )Also, each time a table is redrawn, the newly created table footer gets appended to previous ones which results in multiple rows of table footers.

I managed to solve it by removing the header using $("#contractsoverview tfoot").remove(); and then adding it again each time

1 ) when I use the columDefs to hide some columns, the table footers doesn't hide with columns resulting in mismatch of columns to footers.

I tried to check the column visibility and only append the footer if columns are visible.
May be , I need to check the visibility outside the loop and then append the footer but not able to do it.

             "footerCallback": function ( row, data, start, end, display  ) {

     $("#contractsoverview tfoot").remove();


  var api = this.api();

    this.api().columns().every(function () {
            var column = this;



         if (($(column.header()).hasClass('sum')) && (column.visible() == true )){ 

var footer = $("<tfoot><tr></tr></tfoot>").appendTo("#contractsoverview");

                   var sum = column
                    .data()
                    .reduce(function(a, b) {
                      var x = parseFloat(a) || 0;
                      var y = parseFloat(b) || 0;
                      return x + y;
                    }, 0);
            } 

            else {
              var sum = "";
            }

           $(footer).append('<th class="text-left">'+sum+'</th>');


        });


             }

Thank you

Khalid Teli

@kthorngren
Everything is sorted now. Thanks you

          if (column.visible() == true ){ 
            $(footer).append('<th class="text-left">'+sum+'</th>');}