How to refresh datatable columns on click event

Lokeshwari

I have a form with dropdown. On changing dropdown i will get data which varies everytime. Im binding data and columns dynamically. Dynamic columns are working fine for first time but from second time onwards data is coming fine but it is not binding to table.

Lokeshwari

here is my code for binding datatable. both data and columns are coming from database.also export buttons are visible here. buttons div is empty

$.ajax({
cache: false,
type: "POST",
url: "../AdminReport.asmx/GetConsolidatedReport",
contentType: "application/json",
data: JSON.stringify({
ExamMasterID: ExamID,
By: ExamType
}),
dataType: "json",
success: function (data) {
var table_data = JSON.parse(data.d);

                var tableHeaders = "";
                var columns = [];
                $.each(table_data.Table1, function (key, value) {
                    tableHeaders += "<th>" + value.columns + "</th>";
                    columns.push({
                        data: value.columns,
                        title: value.columns
                    });
                });


                $("#tblConsolidatedReport").html('');

                $("#tblConsolidatedReport").append('<thead><tr>' + tableHeaders + '</tr></thead>');

                 $('#tblConsolidatedReport').dataTable({
                    "data": table_data.Table,
                    "columns": columns,
                    "destroy": true,
                    "cache": false,
                    "ordering": true,
                    scrollY: "600px",
                    scrollCollapse: true,
                    dom: 'Blfrtip',
                    buttons: ['copy', 'csv', 'excel'],
                    colReorder: true,
                    select: true
                });
                getConRecordsinfo();
            },
            error: function () {

            }
        });