Update dynamic headers datatable

Question

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.

Reverend Pete · Accepted Answer · 2019-11-19 23:39:12Z

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>

Glad I found this answer. Thank you for the explanation about destroy() and clear(). It helped me to avoid future bugs.

Collectives™ on Stack Overflow

Update dynamic headers datatable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related