CODEWITHSUNDEEP
javascriptjquerydatatables
cplaiuu
cplaiuu

Reputation: 163

Update dynamic headers datatable

I am using the data table version 1.10.16. I am trying to make a pivot table. Depending on the option selected, it shows some columns or others. But when I choose an option and then choose other headers they don't work correctly.

Like in this example: 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++;

  });

If you click once it shows 4 columns but the second time you click, it would have to show only 2.

I try to destroy,clear() the datatable but without result.

Upvotes: 0

Views: 1827

Answers (1)

Reverend Pete
Reverend Pete

Reputation: 815

The problem is that table.destroy() basically removes all the DataTables formatting, but leaves the "original" table untouched in the html. And table.clear() just removes the rows, but not the headers. So you just need to destroy the DataTable and then you need to empty the table before you rebuild it.

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

Here's a working snippet:

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>

Upvotes: 2

Related Questions