title: Pagination not working after reinitialize the data-table instance in angular 8
body: <p>I am trying to paginate data from an array in angular 8, but there is a weird problem I m facing. I am paginating data by dtTrigger as shown in the example <a href="https://l-lin.github.io/angular-datatables/#/basic/angular-way" rel="nofollow noreferrer">https://l-lin.github.io/angular-datatables/#/basic/angular-way</a> but when new data is being added, page numbers not increasing according to the data.</p>
  
  <p>I've tried the rerendering method, but it's not working as expected</p>
  
  <pre><code>import { Component, OnInit, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
  import { AdminService } from 'src/app/Services/admin.service';
  import { Router, ActivatedRoute } from '@angular/router';
  import { HttpErrorResponse, HttpClient, HttpHeaders } from '@angular/common/http';
  import { PagerService } from './Pager.service';
  import { PageService } from 'src/app/Services/page.service';
  import { AuthServices } from 'src/app/Services/auth.service';
  import { Subject, pipe } from 'rxjs';
  import { map } from 'rxjs/operators';
  import { DataTableDirective } from 'angular-datatables';
  
  declare var $: any;
  
  class DataTablesResponse {
    data: any[];
    draw: number;
    length: number;
  }
  
  @Component({
    selector: 'app-admin',
    templateUrl: './admin.component.html',
    styleUrls: ['./admin.component.sass']
  })
  
  export class AdminComponent implements OnInit, OnDestroy {
    @ViewChild(DataTableDirective, { static: false })
    dtElement: DataTableDirective;
    myTable: DataTables.Api;
    dtOptions: DataTables.Settings = {};
    dtTrigger: Subject&lt;any&gt; = new Subject();
    allData: any = [];
    curr_data: number;
  
    constructor(
      private authService: AuthServices,
      private pageService: PageService,
      private adminService: AdminService,
      private router: Router,
      private pagerService: PagerService,
      private route: ActivatedRoute,
      private http: HttpClient
    ) { }
  
    ngOnInit() {
      const that = this;
      this.getParamNum();
      this.dtOptions = {
        language: { search: '', searchPlaceholder: 'Search' },
        pagingType: 'full_numbers',
        pageLength: 10,
        info: true,
        drawCallback() {
          $('.paginate_button.next:not(.disabled)', this.api().table().container())
            .on('click', () =&gt; {
              this.api().page(2).draw(false);
              that.getFurtherData();
            });
          $('.paginate_button:not(.disabled)', this.api().table().container())
            .on('click', () =&gt; {
              that.getFurtherData();
            });
        },
        columns: [{ data: 'ID' }, { data: 'post_title' }, { data: 'post_status' }]
      };
      this.getData(this.curr_data);
    }
  
    // ngAfterViewInit(): void {
    //   this.dtTrigger.next();
    // }
  
  
    /* Receiving params for initial data */
    getParamNum() {
      this.route.queryParams.subscribe(params =&gt; {
        this.curr_data = params.curr_data;
        console.log(this.curr_data);
      });
    }
  
    /* Getting initial data */
    getData(currData: number) {
      this.adminService.getAllData(currData)
        .subscribe(allData =&gt; {
          this.allData = allData;
          console.log(this.allData);
          // Calling the DT trigger to manually render the table
          this.dtTrigger.next();
        }, err =&gt; {
          if (err instanceof HttpErrorResponse) {
            if (err.status === 500 || err.status === 401) {
              this.authService.loggedOut();
            }
          }
        });
    }
  
    getFurtherData() {
      const lastData = this.allData[this.allData.length - 1];
      this.http.post('http://localhost:3000/api/more_data', lastData).subscribe(
        (resp: any) =&gt; {
          resp.forEach(elem =&gt; this.allData.push(elem));
          console.log(this.allData);
          this.rerender();
        },
        err =&gt; console.error(err));
    }
  
    rerender(): void {
      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) =&gt; {
        const currentpage = dtInstance.page() + 1;
        console.log(currentpage);
        // Destroy the table first
        dtInstance.destroy();
        // Call the dtTrigger to rerender again
        this.dtTrigger.next();
        // dtInstance.page(currentpage).draw('full-hold');
      }).catch(err =&gt; console.error('aya re aya', err));
    }
  
    ngOnDestroy() {
      // Do not forget to unsubscribe the event
      this.dtTrigger.unsubscribe();
    }
  }
  
  </code></pre>
  
  <p>I have to use dtTrigger.next() for incrementing page numbers but when I comment my dtTrigger.next() in rerender method then page incrementing but it reinitializes again the data table and page is set to 1. So that I cannot go to other pages.</p>