angular 7 - reload data in data table

Question

I'm using angular 7 with angular-datatables. I'm tring to define a "rerender" button in order to reload data like in this example.

I don't understand what should I place in the render function:

My API function:

fn_getFavoriteTables() {

  this._getFavoriteTablesApiCall =  this.getFavoriteTablesService.getFavoriteTables(Number(localStorage.getItem('UserID')), Number(localStorage.getItem('BranchID'))).pipe(takeUntil(this.destroySubject$)).subscribe(x => {
        this.getFavoriteTables = x;
        this.dtTrigger.next();
    });

};

rerender function:

rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // Destroy the table first 

        dtInstance.destroy();


        // Call the dtTrigger to rerender again
        this.dtTrigger.next();
    });
}

ngOnDestroy(): void {
  console.log('ngDestroy');
  // Do not forget to unsubscribe the event
  this.dtTrigger.unsubscribe();
}

Adrita Sharma · Accepted Answer · 2019-11-07 10:24:36Z

4

This can also be done like this:

import { DataTableDirective } from 'angular-datatables';

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

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

answered Nov 7, 2019 at 10:24

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

1 Comment

user10484617 Over a year ago

I have tried this solution but it cannot find the namespace DataTables.Api. I have imported DatatablesModule as well as types/datatablesnet and nothing... I]'m using version 9.0.2 of datatables

Assaf Sela · Accepted Answer · 2019-03-17 20:27:05Z

1

Found an answer that worked for me: this is the source site

 rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // Destroy the table first 
        //debugger;
        var table = $('#favoriteTable').DataTable();

        $('#tableDestroy').on('click', function () {
            table.destroy();
        });

        dtInstance.destroy();

        this.fn_getFavoriteTables();

    });
}

answered Mar 17, 2019 at 20:27

Assaf Sela

761 silver badge7 bronze badges

Comments

Sanjeev Chauhan · Accepted Answer · 2021-04-22 10:40:57Z

1

You can use the DataTable destroy() API to remove the table and re-use the dtTrigger to render the table again. Please check below link.

https://l-lin.github.io/angular-datatables/#/advanced/rerender

answered Apr 22, 2021 at 10:40

Sanjeev Chauhan

4,1273 gold badges26 silver badges31 bronze badges

Collectives™ on Stack Overflow

angular 7 - reload data in data table

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related