使用javascript和colVis问题创建的数据表

Question

我只使用javascript创建的数据表。 （我以这种方式创建...由于程序限制，json数据行也以这种方式创建）

施工工作做得很好，但使用ColVis时遇到了问题：

如果我隐藏，例如＆＃34; STATO＆＃34;它隐藏的列，然后如果我想再次显示我再次点击它但...列标题回到原始位置...但列数据拉到表的末尾！

这是我的小提琴：http://jsfiddle.net/bbLjzspf/4042/

$(document).ready(function() {

 $("#btn").on("click", function(e){
 e.preventDefault();


  var json_colonne = [];

        // COLONNA 1 = NOME STATO

        var titolo_colonna = {};

        titolo_colonna['title'] = "Stato";
        titolo_colonna['visible'] = "visible";
        titolo_colonna['className'] = "";

        json_colonne.push(titolo_colonna);

        // COLONNA 2 = Totale (stato)

        var titolo_colonna = {};

        titolo_colonna['title'] = "Totale";
        titolo_colonna['visible'] = "visible";
        titolo_colonna['className'] = "sum";

        json_colonne.push(titolo_colonna);

        // COLONNA 3 = Percentuale

        var titolo_colonna = {};

        titolo_colonna['title'] = "Percentuale";
        titolo_colonna['visible'] = "visible";
        titolo_colonna['className'] = "";

        json_colonne.push(titolo_colonna);

  var json_righe = [];


  // simulate real data

  var riga = [ "State 1" ]; // col 1

        riga.push( "500" ); // col 2

  riga.push( "10%" );   // col 3

        json_righe.push(riga);

  var riga = [ "State 2" ]; // col 1

        riga.push( "400" ); // col 2

  riga.push( "8%" );    // col 3

        json_righe.push(riga);

  var riga = [ "State 3" ]; // col 1

        riga.push( "700" ); // col 2

  riga.push( "15%" );   // col 3

        json_righe.push(riga);

  //



 var tfoot = "<tfoot><tr>";

            for ( i=0; i<json_colonne.length; i++ ) {
                tfoot = tfoot + "<th></th>";
            }

            tfoot = tfoot + "</tr></tfoot>";


 $("#dest").html("");

$("#dest").append('<table class="display table table-bordered table-striped table-hover" id="tabellaResoconto" style="width:100%;">'+tfoot+'</table>');

            if ( $.fn.dataTable.isDataTable( '#tabellaResoconto' ) ) {

                // used to prevent another #btn click

                $("#tabellaResoconto").DataTable().destroy();
                $("#tabellaResoconto").empty();
            }

            $('#tabellaResoconto').DataTable( {
              dom: 'Bfrtip',
              "language": {
                    buttons: {
                        pageLength: {
                            _: "Mostra %d elementi",
                            '-1': "Tutti"
                        }
                    }
              },
              bFilter: false,
              "ordering": false,
              responsive: false,
              paging: false,
              "pageLength": -1,
              "info": false,
              scrollCollapse: false,
              scrollY: false,
              columns: json_colonne,
              data: json_righe,
              footerCallback: function(row, data, start, end, display) {

                      var api = this.api();

                      if ( !this.api().data().any() ) {  } else {

                          this.api().columns({ page: 'current' }).every(function () {
                              var column = this;
                              if ($(column.header()).hasClass('sum')) {
                                        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 = "";
                              }
                              $(this.footer()).html(sum);
                          });

                      }

              },
              buttons: [
                        {
                            extend: 'colvis',
                            text: 'Visualizza colonne',
                            columns: ':not(.noVis)'
                        }
                    ]
            } );



      });//btn

}）;