Hi All! I am new to datatables. I am using this to display results from ajax call.

On a single page, I have user form and the result section. User fills the details and submit. On this, datatable is displayed. This works perfectly fine. But when user updates anything on the form and submits it, I am trying to destroy datatable and recreate it. Doing this, i am getting the error - clientWidth of undefined. Below is the code -

function CBResults(response){
    var dataArray = response.data;
    
    
    
    if ($.fn.DataTable.isDataTable("#thetable")) {
        $('#thetable').dataTable();
        $('#thetable').DataTable().clear().destroy();
        
        
    }
    var html = '<tbody>';
    for(var i = 0; i < dataArray.length; i++)
        html += '<tr><td></td></tr>';  // code to populate columns of the table
    
    html += '</tbody>';
    
    
        $('#thetable thead').first().after(html);

        $('#thetable').DataTable( {
            retrieve: true,          
            dom: 'Blfrtip',
            scrollY: "300px",
            responsive: true,
            scrollX:        true,
            scrollCollapse: true,
            columnDefs: [ {
                targets: [4,5,6,7,8,9,10,11],
                render: $.fn.dataTable.render.ellipsis(10)
            } ], 
            buttons: [
                'colvis','copy', 'csv', 'excel', 'pdf'  
            ],
            fixedColumns:   {
                leftColumns: 2
            },
            
             "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
        } );
}

Let me know what I am doing wrong and how can I correct it? Appreciate quick reply on this.