c is undefined and b.nTablewrapper is null error

patelleena57

Hello,

I am trying to show datatable dynamically
For Ex
First i need to select which columns i need to see and then click on button this will show only selected columns.

So every time i click on button it should show different columns and data according to column.

But what happens. For the first time Datatable is loading fine. But when i de select some columns or add new columns and click on button it gives this error

c is undefined
b.nTablewrapper is null

I searched and found that i need to destroy datatable and then reinitialize it.

But when i use destroy it doesnt show any data.

Below is my code

                $('#table').DataTable().fnDestroy();
                $('#table').DataTable(
                 scrollCollapse: true,
                header : true,
                "lengthMenu": [ 10, 50, 100 ],
                footer: true,
                "paging":   true,
                "ordering": true,
                scroller:       true,
                "serverSide": true,
                "destroy":true,
                "pagingType": "full_numbers",
                "oLanguage": {
                "sSearch": "<a class='btn searchBtn' id='searchBtn'><i class='fa 
                fa-search'></i></a> "
                },
                dom: 'lBfrtip',
                buttons: [
                        {
                text: '<i class="fa 
                fa-refresh">&nbsp;&nbsp;Refresh&nbsp;&nbsp;Records</i>',
                action: function ( e, dt, node, config ) {
                dt.ajax.reload();
                }
                }
                    ],
                "ajax":{
                    url : url,
                    type: "post",
                    error: function(data){ 
                        //error code

                    },
                global: false,
                },


                deferRender:    true

                );

allan

$('#table').DataTable().fnDestroy();

Remove that. That will give a Javascript error apart from anything else since it is using a legacy API method on the new API.

"destroy":true,

Remove that as well.

Then use $.fn.dataTable.isDataTable() to determine if the table (#table in this case) is a DataTable or not. If it is then destroy it and empty it:

$('#table').DataTable().destroy();
$('#table').empty();

Then create the new table.

Allan