javascript - How to Update the params for every pagination button clicks

Question

Trying to implement pagination, Initially I'm trying to load datatable with few records, once page loaded trying to click pagination buttons like next or any pagination buttons to update the new set of records. I'm able to get the iStart, iEnd records but unable to update the url for every pagination click. Trying to print the console but function is not calling and console.log is not updated with new params. Could you please suggest me how to do the update the params for API. Here is the sample code,

Sample Demo datatatble is not work with pagination, for verification printing the console for the updated querystring.

ngOnInit(): void {
        
        this.dtOptions = {
          processing: true,
          destroy: true,
          columns: [
            { title: '<input type="checkbox" />' },
            { data: 'index' },
            { data: 'firstname' },
            { data: 'lastname' }
          ],
          infoCallback: (oSettings, iStart, iEnd, iMax, iTotal, sPre) => {
              pageStartNo = iStart;
              pageEndNo = iEnd;
              console.log(pageStartNo, pageEndNo);
              // this.loadTable();
          }
        };
      }
    loadTable(){
        let params = new HttpParams()
          .set('param1', '123')
          .set('param2', '456')
          .set('minNumber', pageStartNo) 
          .set('maxNumber', pageEndNo);
    
        console.log('params >>>>>>>>>>>>>' + params.toString());
    
        this.http
          .get<any[]>(
            'https://raw.githubusercontent.com/l-lin/angular-datatables/master/demo/src/data/data.json',
            {
              params
            }
          )
          .subscribe(response => {
            this.persons = response.data;
            this.dtTrigger.next();
          });
      }

HTML code:

<button (click)="loadTable()">Load Table</button>

Sample Demo Stackblitz

Answer 1

If I understand your question correctly, you wanted to apply server-side pagination right?

Here is an official documentation for this.

Add ajax method in dtOptions.

this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 10,
  serverSide: true,
  processing: true,
  ajax: (dataTablesParameters: any, callback) => {
    console.log('Params', dataTablesParameters);
    //If you have different key for page number/size change it
    dataTablesParameters.minNumber = dataTablesParameters.start + 1;
    dataTablesParameters.maxNumber =
          dataTablesParameters.start + dataTablesParameters.length;    this.http
      .post<any[]>(
        'YOUR_API_NAME_HERE',
        dataTablesParameters,
        {}
      )
      .subscribe(resp => {
        this.persons = resp.data;

        //Once API fetched data successfully inform datatable by invoking the callback
        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: []
        });
      });
  },
  columns: [{ data: 'id' }, { data: 'firstName' }, { data: 'lastName' }]
};

Working Stackbliz Demo