DataTables warning: table id=DataTables_Table_1 - Cannot reinitialise DataTable. not working

Question

DataTables warning:

table id=DataTables_Table_1 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

My code is

  this.dtOptions = {
    pagingType: 'full_numbers',
    scrollX: true,
    lengthChange: false,
    pageLength: 100
  };

My data table tag is

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"  class="display nowrap" cellspacing="0" width="100%" >

I am using angular 4 with data table when I print my data in data table showing the first character only not showing full dynamic values. How can I add solve this?

I am using this data table https://l-lin.github.io/angular-datatables/#/getting-started

I added a sample image of my data table result dynamic data. When I am using some static data that time working fine .Only for dynamic data

you must be calling dataTable twice are you sure it is called once? — Muhammad Omer Aslam
Two times but a different condition. Data table it's working one per page? — Peri

Muhammad Omer Aslam Muhammad Omer Aslam · Accepted Answer · 2017-11-10T18:13:27

DataTables has a wide range of configuration options which can be used to customise the table at initialisation time, but only at initialisation time. After a DataTable has been initialised any attempt to use these options will result in an error.

Meaning

Simply put, DataTables does not allow initialisation options to be altered at any time other than at initialisation time. Any manipulation of the table after initialisation must be done through the API and trying to set the initialisation options once the table has already been initialised will result in the error

This error is triggered by passing in options to a DataTables constructor object when the DataTable instance for the selected node has already been initialised. For example:

$('#example').dataTable( {
    paging: false
} );


$('#example').dataTable( {
    searching: false
} );

will result in an error when the second block of code is run, since #example is already initialised as a DataTable.

Resolution

There are a number of ways that this error can crop up in code, so there also a number of different methods that can be used to resolve the issue, depending upon exactly what you are trying to achieve.

Single initialisation

If you want to make use of multiple DataTables initialisation options, simply apply them all together to the table. In the case of the example error above, where we try to disable paging and searching we would use:

$('#example').dataTable( {
    paging: false,
    searching: false
} );

Object instance retrieval

if ( $.fn.dataTable.isDataTable( '#example' ) ) {
    table = $('#example').DataTable();
}
else {
    table = $('#example').DataTable( {
        paging: false
    } );
}

retrieve

table = $('#example').DataTable( {
    retrieve: true,
    paging: false
} );

destroy

table = $('#example').DataTable( {
    paging: false
} );

table.destroy();

table = $('#example').DataTable( {
    searching: false
} );

Hope that helps you out.

DataTables warning: table id=DataTables_Table_1 - Cannot reinitialise DataTable. not working

1 Answers