Reinitialization error while using datatables in Angular 7 while pulling data from an API

Question

I'm trying to pull data from an API and display it in DataTables. Code is as given below:

<table class="table display table-striped table-hover table-bordered row-border hover" [dtOptions]="dtOptions" datatable="" #dataTable></table>

JavaScript:

@ViewChild(DataTableDirective)
@ViewChild('dataTable') table;
datatableElement: DataTableDirective;
dataTable: any;
dtOptions: any;  
message = '';
title = 'angulardatatables';  
ngOnInit(): void {
    this.dtOptions = {
        pagingType: 'full_numbers',
        pageLength: 15,
        processing: true,
        responsive: true,
        dom: 'Bfrtip',
        'ajax': {
            url: 'http://localhost:8080/incident',
            type: 'GET'
        },
        columns: [
            {
                title: 'Incident',
                data: 'number'
            },
            {
                title: 'Product',
                data: 'u_product'
            },
            {
                title: 'Status',
                data: 'incident_state'
            }
        ]
    };
    this.dataTable = $(this.table.nativeElement);
    this.dataTable.DataTable(this.dtOptions);
}

When I run that code, I get below error:

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

I made sure that datatables for my node hasn't bee initialized already and I'm using technique given in this link and this link.

How can I fix this error?

score 0 · Answer 1 · answered Sep 06 '19 at 11:01

Fixed it!
New code is:

<table class="table display table-striped table-hover table-bordered row-border hover" datatable [dtOptions]="dtOptions" datatable="" #dataTable>
          </table>

JavaScript:

    @ViewChild(DataTableDirective)
    datatableElement: DataTableDirective;
    message = '';
    title = 'angulardatatables';
    constructor(private router: Router) {}
    dtOptions: DataTables.Settings = { };
    ngOnInit(): void {
        this.dtOptions = {
            pagingType: 'full_numbers',
            pageLength: 15,
            processing: true,
            responsive: true,
            dom: 'Bfrtip',
            'ajax': {
                url: 'http://localhost:8080/incident',
                type: 'GET',
                dataSrc: "result"
            },
            columns: [
                {
                    title: 'Incident',
                    data: 'number'
                },
                {
                    title: 'Product',
                    data: 'u_product'
                },
                {
                    title: 'Status',
                    data: 'state'
                }
            ]
        };
    }

Reinitialization error while using datatables in Angular 7 while pulling data from an API

1 Answers1