Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
284 views
in Technique[技术] by (71.8m points)

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

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...