javascript - 更新动态 header 数据表

Question

我正在使用数据表版本1.10.16。我正在尝试制作一个数据透视表。根据所选的选项，它会显示一些列或其他列。但是，当我选择一个选项然后选择其他标题时，它们无法正常工作。

就像这个例子: https://codepen.io/cplaiuu/pen/oNNmeam

var columns, click = 0, table;

 $('#show_table').on('click', function() { 

   if(table){
     table.clear();
   }

   if(click == 0){
     columns = [{'sTitle': 'Column 1'}, {'sTitle': 'Column 2'}, {'sTitle': 'Column 3'}, {'sTitle': 'Column '}];
   }else{
     columns = [{'sTitle': 'Column 1'}, {'sTitle': 'Column 2'}];
   }  

    table = $('#example').DataTable({
          dom:  "<'row'<'col-sm-6'><'col-sm-6 button_columns' f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-5'><'col-sm-7'p>>",
          responsive: true,
          paging: false,
          columns: columns,
          language: {
            zeroRecords: 'Empty',
            infoEmpty: 'Empty',
            search: "_INPUT_",
            searchPlaceholder: 'Search',
          },
          destroy: true
          //retrieve: true 
        });
   click++;

  });

如果您单击一次，它会显示 4 列，但第二次单击时，它只会显示 2 列。

我尝试销毁，清除()数据表但没有结果。

Answer 1

问题是 table.destroy() 基本上删除了所有 DataTables 格式，但在 html 中保留了“原始”表。 table.clear() 仅删除行，但不删除标题。所以你只需要销毁DataTable，然后在重建之前清空该表。

if(table){
  table.destroy();
  $('#example').empty()
}

这是一个工作片段:

var columns, click = 0, table;

 $('#show_table').on('click', function() { 
   
   if(table){
     table.destroy();
     $('#example').empty()
   }
   
   if(click == 0){
     columns = [{'sTitle': 'Column 1'}, {'sTitle': 'Column 2'}, {'sTitle': 'Column 3'}, {'sTitle': 'Column 4'}];
   }else{
     columns = [{'sTitle': 'Column 1'}, {'sTitle': 'Column 2'}];
   }  
    table = $('#example').DataTable({
          dom:  "<'row'<'col-sm-6'><'col-sm-6 button_columns' f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-5'><'col-sm-7'p>>",
          responsive: true,
          paging: false,
          columns: columns,
          language: {
            zeroRecords: 'Empty',
            infoEmpty: 'Empty',
            search: "_INPUT_",
            searchPlaceholder: 'Search',
          }
        });
   click++;
   
  });

<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<button id="show_table"> Show table</button>

<table class="table table-striped table-bordered no-footer dataTable" id="example" style="width:100%"></table>