Refreshing table created using Angular Datatables

Question

I am using the Angular Datatables library in my project, I am fetching the data from an URL which returns JSON object, I put the data in an array and use it to populate my table.

appenditems(){
    this.items = [];
    this.items2 = [];
    this.items3 = [];
    $.getJSON(this.urlbuild[0].toString(), ( data:any ) => {
      var p, pr;
      var test = data.features;
      for (p in test){
        var row = []
        for (pr in test[p].properties){
          row.push(test[p].properties[pr])
        }
        this.items.push(row)
      }
    })
}

I initialize the dtOptions as

this.dtOptions = {
      data: this.items,
      columns:[
        {title: "Column1"},
        {title: "Column2"},
        {title: "Column3"}
      ],
      paging: false,
      scrollY: 180,
      scrollX: true,
      processing: true,
      dom: 'Brtip',
      buttons: [
            'copy', 'csv', 'excel', 'print'
        ],
      responsive: true
    };

My html looks like this

<table id="table1" datatable [dtOptions]="dtOptions" class="display" style="width:70%"></table>

The issue I am facing is with re-rendering or refreshing the table. I apply and append CQL filter to the URL and then it returns only the required data as JSON. I want the table to be refreshed after I append the URL with those parameters. I have tried ajax.reload(), and re-rendering using this which is basically destroy and re-render using dtTrigger but it doesn't seem to work.

If you need more information about the code or how something is working please comment and ask.

Answer 1

you can use reload() function: rerender your table

import { DataTableDirective } from 'angular-datatables';

dtElement: DataTableDirective;
dtInstance: Promise<DataTables.Api>;

rerender(): void  {
  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
  dtInstance.ajax.reload()
});