Getting issue while destroy/Reinitialize Individual search Data table

shivtheunleased

On a button click want to fetch fresh updated data in data table , when reinitialize table it will become multiple headers

Note i am using Individual search in data table .
Kindly find my below code for the same:

var table;
if ( $.fn.dataTable.isDataTable('#CompletedTID') ) {
table = $('#CompletedTID').DataTable();
table.destroy();
}
$('#CompletedTID thead tr').clone(true).appendTo('#CompletedTID thead');
$('#CompletedTID thead tr:eq(1) th').each(function (i) {
var title = $(this).text();
$(this).html('<input type="text" placeholder="' + title + '" />');

            $('input', this).on('keyup change', function () {
                if (table.column(i).search() !== this.value) {
                    table
                        .column(i)
                        .search(this.value)
                        .draw();
                }
            });
        });

         table = $('#CompletedTID').DataTable({
            fixedHeader: true,
             destroy:true
        });

shivtheunleased

var table;

     if ( $.fn.dataTable.isDataTable('#CompletedTID') ) {
     table = $('#CompletedTID').DataTable();
     table.destroy();
  }
            $('#CompletedTID thead tr').clone(true).appendTo('#CompletedTID thead');
            $('#CompletedTID thead tr:eq(1) th').each(function (i) {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="' + title + '" />');

                $('input', this).on('keyup change', function () {
                    if (table.column(i).search() !== this.value) {
                        table
                            .column(i)
                            .search(this.value)
                            .draw();
                    }
                });
            });

             table = $('#CompletedTID').DataTable({


                fixedHeader: true,
                 destroy:true
                 
                //    "order": [[ 0, "desc" ]] , "columnDefs": [{"targets": [ 0 ],"visible": false } ],   "aoColumnDefs": [{ "bSearchable": false, "aTargets": [0] }]
            });

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

You are executing this each time you create reinitialize the Datatable:

          $('#CompletedTID thead tr').clone(true).appendTo('#CompletedTID thead');

So it will append another thead to the table. Datatables doesn't know about this header, since you are adding it, and won't remove it when using destroy(). Move this statement to a place where it is executed only once.

Kevin