如何为每个分页按钮单击更新参数 [英] 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,
示例演示数据表不能用于分页,用于验证为更新的查询字符串打印控制台
.
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>
推荐答案
如果我正确理解了您的问题,您想对服务器端进行分页吗?
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' }]
};
这篇关于如何为每个分页按钮单击更新参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!