DataTables warning: table id=example - Cannot reinitialise DataTable. For more information

Question

I am using angular 4 with data table ... Right side scroll bar is not working. When I add this the in my data table I am getting this error. how can I solve this? this is my code $(document).ready(function() { $('#example').DataTable( { "scrollX": true } ); } );

<table id="example" class="display nowrap" cellspacing="0" width="100%">

I am getting a message in an alert on my browser "DataTables warning: table id=example - Cannot reinitialise DataTable. For more information"

I am using this data table enter link description here

Answer 1

try like this:

ngOnInit(): void {
    this.dtOptions = {
      scrollX: true
    };
}

Answer 2

This issue arises if there is a previous initialization of DataTable. So, either set the bDestroy property of the DataTable to true like the following,

$('#dataTable').dataTable({
    .
    .        
    "bDestroy": true
});

OR remove the previously initialised DataTable such as initializing in the begining of the onload/ready method like the following,

$(document).ready(function() {
    $('.dataTable').dataTable();
} );

Answer 3

Try this.

this.dtOptions = {
      ...
      destroy: true,
      ...
    };