如何为每次分页按钮点击更新参数 [英] How to Update the params for every pagination button clicks

问题描述

尝试实现分页，最初我尝试加载包含少量记录的数据表，加载页面后尝试单击分页按钮，例如 next 或任何分页按钮 以更新新的记录集.我能够获得 iStart, iEnd 记录，但无法为每次分页点击更新 url.尝试打印 console 但函数未调用且 console.log 未使用新参数更新.您能否建议我如何更新 API 的参数.这是示例代码，

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,

示例演示数据表不适用于分页，用于验证打印更新查询字符串的 console.

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 代码:

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

示例演示 Stackblitz

推荐答案

如果我正确理解你的问题，你想应用服务器端分页对吗?

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

这是一个官方文档 为此.

在dtOptions中添加ajax方法.

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' }]
};

正在运行的 Stackbliz 演示

这篇关于如何为每次分页按钮点击更新参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！