Angular PrimeNG DataTable服务器端分页
我目前正在从事Angular 4项目,并使用Priming数据表。到目前为止,这个框架看起来相当整洁,但我想让我的分页服务器端。那样的话,我只会加载10,20,。。一次记录,而不是一次加载所有1000+项 以前有人这样做过吗,或者有人知道解决方法吗Angular PrimeNG DataTable服务器端分页,angular,primeng,primeng-datatable,Angular,Primeng,Primeng Datatable,我目前正在从事Angular 4项目,并使用Priming数据表。到目前为止,这个框架看起来相当整洁,但我想让我的分页服务器端。那样的话,我只会加载10,20,。。一次记录,而不是一次加载所有1000+项 以前有人这样做过吗,或者有人知道解决方法吗 PS:如果你没有一个解决方案,但知道一个框架支持这个,请让我知道 您可以监听分页器的onPageChange事件,以告知您何时需要获取Paginator.rows数据。看起来懒惰就是我们所做的。。。寻找:) 借助延迟加载,我们可以在数据表上实现服务器
PS:如果你没有一个解决方案,但知道一个框架支持这个,请让我知道 您可以监听分页器的
onPageChange
事件,以告知您何时需要获取Paginator.rows
数据。看起来懒惰就是我们所做的。。。寻找:)
借助延迟加载,我们可以在数据表上实现服务器端分页、过滤和排序 代码如下:
listing.html
<div class="table-responsive">
<p-dataTable sortField="FileNo" [sortOrder]="1" [value]="paitientListing" [lazy]="true" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20]" [totalRecords]="totalRecords" (onLazyLoad)="loadPatientListing($event)">
<p-column field="PatientID" header="File No" [sortable]="true" [style]="{'width':'94px'}"></p-column>
<p-column field="LastName" [sortable]="true" [style]="{'width':'121px'}" header="Last Name"></p-column>
<p-column field="FirstName" [sortable]="true" [style]="{'width':'122px'}" header="First Name"></p-column>
<p-column styleClass="col-button" [style]="{'width':'90px'}">
<ng-template pTemplate="header">
Action
</ng-template>
<ng-template let-paitientListing="rowData" pTemplate="body">
<button type="button" pButton (click)="editPatient(paitientListing.PatientID)" icon="fa-pencil-square-o"></button>
<button type="button" pButton (click)="deletePatient(paitientListing.PatientID)" icon="fa-trash-o" class="ui-button-danger"></button>
</ng-template>
</p-column>
</p-dataTable>
listing.Component.ts
loadPatientListing(event) {
this.patientFilterModel.PageSize = event.rows;
this.patientFilterModel.RowNumber = event.first;
this.patientFilterModel.OrderColumn = event.sortField;
if (event.sortOrder == 1) {
this.patientFilterModel.OrderBy = "asc";
}
else {
this.patientFilterModel.OrderBy = "desc";
}
this.patientService.GetPatientListing(this.patientFilterModel).subscribe(
data => {
this.patientModel = data;
this.paitientListing = this.patientModel._ListPatientListing;
this.totalRecords = data.TotalRecords;
},
error => {
this.loading = false;
}
);
}
listing.html
行动
listing.Component.ts
loadPatientListing(事件){
this.patientFilterModel.PageSize=event.rows;
this.patientFilterModel.RowNumber=event.first;
this.patientFilterModel.OrderColumn=event.sortField;
if(event.sortOrder==1){
this.patientFilterModel.OrderBy=“asc”;
}
否则{
this.patientFilterModel.OrderBy=“desc”;
}
this.patientService.GetPatientListing(this.patientFilterModel).订阅(
数据=>{
this.patientModel=数据;
this.paitientListing=this.patientModel.\u ListPatientListing;
this.totalRecords=data.totalRecords;
},
错误=>{
这一点:加载=错误;
}
);
}
仅供参考,第6版中不推荐使用p-dataTable。PrimeFaces建议您使用TurboTable。我只是需要经过转换。您需要添加
[totalRecords]=“totalRecords”[lazy]=“true”(onLazyLoad)=“loadPatientLazy($event)”[loading]=“loading”
<p-table id='patients-grid' [value]='patients' [totalRecords]='totalRecords'
expandableRows='true' [responsive]='true' dataKey=''
[rows]='5' [paginator]='true' [rowsPerPageOptions]='[5,10,50]'>
<ng-template pTemplate='header'>
<tr>
<th style='width: 40px;'></th>
<th style='width: 40px;'>
<button (click)='addItemClicked( )' pButton type='button' icon='fa fa-plus' class='ui-button-primary'></button>
</th>
<th style='width: 80px;' [pSortableColumn]='"PatientID"'>
Patient I D
<p-sortIcon [field]='PatientID'></p-sortIcon>
</th>
<th style='width: 250px;' [pSortableColumn]='"LastName"'>
Last Name
<p-sortIcon [field]='LastName'></p-sortIcon>
</th>
<th style='width: 250px;' [pSortableColumn]='"FirstName"'>
First Name
<p-sortIcon [field]='FirstName'></p-sortIcon>
</th>
<th style='width: 40px;'></th>
</tr>
</ng-template>
<ng-template pTemplate='body' let-rowData let-columns='columns' let-expanded='expanded'>
<tr>
<td>
<a href='#' [pRowToggler]='rowData'>
<i [ngClass]='expanded ? "pi pi-fw pi-chevron-circle-down" : "pi pi-pw pi-chevron-circle-right"' style='font-size: 1.25em'></i>
</a>
</td>
<td>
<button (click)='editItemClicked( rowData )' pButton type='button' icon='fa fa-edit' class='ui-button-primary'></button>
</td>
<td>{{rowData['PatientID']}}</td>
<td>{{rowData['LastName']}}</td>
<td>{{rowData['FirstName']}}</td>
<td>
<button (click)="deleteItemClicked( patient )" pButton type="button" icon="fa fa-trash" class="ui-button-danger"></button>
</td>
</tr>
</ng-template>
<ng-template let-patient pTemplate='rowexpansion'>
<tr><td [attr.colspan]='6'>
<div class='ui-grid ui-grid-responsive ui-fluid'>
<div class='ui-grid-row ui-inputgroup'>
<div class='ui-grid-col-3 nsg-primary-color nsg-text-right'><label for='PatientID'>Patient I D: </label></div>
<div class='ui-grid-col-9' id='PatientID'>{{patient.PatientID}}</div>
</div>
<div class='ui-grid-row ui-inputgroup'>
<div class='ui-grid-col-3 nsg-primary-color nsg-text-right'><label for='LastName'>Last Name: </label></div>
<div class='ui-grid-col-9' id='LastName'>{{patient.LastName}}</div>
</div>
<div class='ui-grid-row ui-inputgroup'>
<div class='ui-grid-col-3 nsg-primary-color nsg-text-right'><label for='FirstName'>First Name: </label></div>
<div class='ui-grid-col-9' id='FirstName'>{{patient.FirstName}}</div>
</div>
</div>
</td><tr>
</ng-template>
</p-table>
我的病人
姓
名字
{{rowData['PatientID']}
{{rowData['LastName']}
{{rowData['FirstName']}
病人身份证:
{{patient.PatientID}
姓氏:
{{patient.LastName}
名字:
{{patient.FirstName}
注意:nsg-CSS类是我的自定义类。对于使用旧版本信息的用户,请访问
另外添加dataKey='createdate'另外,请确保您使用的是HttpClient,Http已弃用。RxJs的第6版非常不同。你能为你的代码提供一些解释吗。。比如什么是“patientFilterModel”和什么是“ListPatientListing”?考虑到答案已被替换,请更新答案好吗?谢谢。答案中的链接已经过时了。这是更新后的链接:在将数据加载到表中之前,我们真的必须知道总记录数吗?是的,需要应用分页
loadData(event: LazyLoadEvent) {
//event.first = First row offset
//event.rows = Number of rows per page
//event.sortField = Field name to sort in single sort mode
//event.sortOrder = Sort order as number, 1 for asc and -1 for dec in single sort mode
//multiSortMeta: An array of SortMeta objects used in multiple columns sorting. Each SortMeta has field and order properties.
//filters: Filters object having field as key and filter value, filter matchMode as value
//globalFilter: Value of the global filter if available
this.cars = //do a request to a remote datasource using a service and return the cars that match the lazy load criteria
}