时间戳

首页 > 解决方案 > 更新动态标题数据表

javascript - 更新动态标题数据表

问题描述

我正在使用数据表版本 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 列。

我尝试破坏，清除（）数据表但没有结果。

标签： javascriptjquerydatatables

解决方案

问题是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>

推荐阅读