如何使用动态列号重新初始化 DataTable？

Question

I want to reinitialize the DataTable according to dropdown value changes on the page. if new table column number is equals to former column numbers then everthing is fine. But when the column number is less or more, then it gives me an error. destroy function doesn't work in this scenario. If I reload the page with new paramters it is also fine. But i want to solve this problem with ajax call. Here is an example: https://jsfiddle.net/aaktas/arbcgvhz/24/ <script async src="//jsfiddle.net/aaktas/arbcgvhz/27/embed/"></script>

Answer 1

I couldn't find a way inside the DataTable functions. I found a quick solution which is re-creating the html table element like below:

 function reCreateTable() {
        $('#reportsTable').remove();
        $('.table-responsive').prepend('<table id="reportsTable" class="table table-striped" style="width:100%"></table>');
    }

If someone can advice any other solution, it would be great.