Upon using DataTable Directive in Angular, shows all data on first page itself (no pagination),on deleting any row it still persist on frontend upon page switch

[Harshad-Lukare]

Hi Team,

Datatable pagination not working upon performing any activity

1) ISSUE -1

I am Using DataTable Directive in angular (version 13), So in this I fetch data from the pubic api "https://api.covidtracking.com/v1/us/daily.json" and all data shows properly with DataTable pagination

But after refreshing page, it shows all data in first page itself (IT SHOULD SHOW ALL DATA WITH PAGINATION)

All Data shown with Pagination:

After refresh Data shown by DataTable on one Page only:

2) ISSUE 2:

When we click on delete button, selected row gets filter from data array, row gets deleted from frontend also. But upon page switch and come back to page, deleted row still persist in frontend view.

After switch to another page and then back to previous page

BELOW IS MY CODE:

File 1:html file

File 2: .ts file

Please check why DataTable shows this behavior upon deleting any row. Suggest some api by using which we solve pagination
issue in angular(v-13)

[shanmukhateja]

Hello,

Try using this example https://l-lin.github.io/angular-datatables/#/basic/server-side-angular-way and see if this is fixed for you.

Can you provide a reproducible StackBlitz repo to investigate this?

Also, please note, I'm moving this issue as a "discussion".

[shanmukhateja]

The best way to resolve this problem is to initialize the table AFTER you fetch the data from server.

1. Move the table init code inside ngOnInit to a separate function.
2. After line 52, once this.posts is updated, call the table init function you've created in the above step and let the table initialize.

Hope this helps :)

[mtholen]

You may have to rerender the table when new data comes in or when the page refreshes.
I do this usually in the subscription return, for example in my supplier list component:

ngOnInit(): void {
    this.initListeners();
    this.cs.getSupportTypes([SupportType.supplier]);
  }

  // cs = CommonService, is an angular service that controls the data fetching.
  initListeners() {
    this.cs.suppliers$.subscribe((s) => {
      this.suppliers = s;
      this.dtRender();
    });
  }

My dtRender() and dtDestroy look like this:

dtDestroy(): void {
    try {
      if (this.dtElement?.dtInstance) {
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.destroy());
      }
    } catch (e) {
      console.error(e);
    }
  }

  dtRender(): void {
    try {
      this.dtDestroy();
      if (this.dtTrigger.observed) this.dtTrigger.next(null);
    } catch (e) {
      console.error(e);
    }
  }

So, in essence, I destroy and rerender the table on every new dataset that comes through.