如何为每次单击分页按钮更新参数

Question

尝试实现分页，最初我尝试加载记录较少的数据表，一旦加载页面，尝试单击next or any pagination buttons等分页按钮来更新新的记录集。我可以获得iStart, iEnd记录，但无法为每次分页单击更新url。正在尝试打印console，但函数未调用，并且console.log未用新参数更新。你能建议我如何更新API的参数吗。这是示例代码，

示例Demo datatatble不适用于分页，用于验证打印更新的查询字符串的console。

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>

示例演示Stacklitz

Answer 1

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

这是一份官方文件。

在dtOptions中添加ajax方法。

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

工作Stackliz演示