Angular Datatable: Table data is not updated for every search(once refresh and re-search only getting new data)

Question

Angular Datatable: Have search fields. will do select and will get datatable population. First time working fine, once we click with some other data and click, API response coming but data is not updated in the table. Could you please suggest me how to destroy/reinitialize table for next click. Here is the sample code I written

    //html table
    
         <table
            datatable
            [dtOptions]="dtOptions"
            [dtTrigger]="dtTrigger"
            class="row-border hover">
            </table> 

    //datatable properties

    this.dtOptions = {
          data: jsonData,
          pagingType: "full_numbers",
          pageLength: 10,
          scrollCollapse: true,
          processing: true,
          fixedHeader: true,
          destroy: true,
          columns: [
            {data: 'test1'},
            {data: 'test2'},
            {data: 'test3'},
      ]
    }

 //http.get for response

    this.http
        .get(url, {params})
        .subscribe((res) => {
          this.results = res;
          this.dtTrigger.next();
   }
    //Table destroy

     ngOnDestroy(): void {
        this.dtTrigger.unsubscribe();
      }

does your this.http.get is in ngOnInit ?

antoineso
– antoineso

2020-12-16 07:58:21 +00:00
Commented Dec 16, 2020 at 7:58 — antoineso
– antoineso, Commented Dec 16, 2020 at 7:58
No, while click on button I'm calling this.http.get

Rajasekhar
– Rajasekhar

2020-12-16 08:02:47 +00:00
Commented Dec 16, 2020 at 8:02 — Rajasekhar
– Rajasekhar, Commented Dec 16, 2020 at 8:02

Luay AL-Assadi · Accepted Answer · 2020-12-16 09:30:37Z

0

I think this question is duplicates with

Getting error in Angular 5 Datatables: cannot reinitialise DataTable

In order to reinitialize table for next click you can define this

rerender(): void {
  this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
     dtInstance.destroy();
     this.dtTrigger.next();     
 });

and call rerender() function after server response

Hope that answers your question

answered Dec 16, 2020 at 9:30

Luay AL-Assadi

4467 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Datatable: Table data is not updated for every search(once refresh and re-search only getting new data)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related