How to reload the datatable data in angular?

Question

I have a form that has a text field say "firstname" and a search button. I would like to create a datable with the values from the search form. Currently, i have the following code in the app.component.ts

export class AppComponent implements OnInit {
 
  dtOptions: DataTables.Settings = {};
  persons:any;
  
  constructor(private http: HttpClient) {

   }

  ngOnInit(){

    this.data = {};
    this.results = {};

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      serverSide: true,
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        that.http
          .post<DataTablesResponse>(
            'http://example.com/api/results',
            dataTablesParameters, {}
          ).subscribe(resp => {

            console.log(resp);
            that.results = resp;

            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [{ data: 'id' }, { data: 'firstname' }, { data: 'lastname' }]
    };

  }

The above code only creates the datatable when we load the page first and will not update the table when we click on the search button. I am planning to create a new function called submit() and call that function on the button click. But how we can reload the datatable values? or how can we create the data table when we click on the submit button in that form? I am using angular 12.

Thanks in advance

Answer 1

You can use the option,

DataTables.Api.ajax.reload();