[英]How to customize PrimeNG TurboTable paginator?
I am using PrimeNG TurboTable in Angular 6. 我在Angular 6中使用PrimeNG TurboTable。
Here's html 这是HTML
<p-table #dataTable
[value]="primengTableHelper.records"
[rows]="primengTableHelper.defaultRecordsCountPerPage"
[paginator]="true"
[totalRecords]="primengTableHelper.totalRecordsCount">
<ng-template pTemplate="header">
<tr>
<th>{{l('Name')}}</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-record="$implicit">
<tr [pSelectableRow]="record">
<td>
<span>
{{record.displayName}}
</span>
</td>
</tr>
</ng-template>
</p-table>
And Here's component.ts 这是component.ts
ngOnInit() {
this.getRoles();
}
getRoles(): void {
this.primengTableHelper.showLoadingIndicator();
let permission = this.permission ? this.selectedPermission : undefined;
this._roleService.getRoles(permission).subscribe(result => {
console.log(result);
this.primengTableHelper.records = result.items;
this.primengTableHelper.totalRecordsCount = result.items.length;
this.primengTableHelper.hideLoadingIndicator();
});
}
The PrimeNG table shows it's default paginator. PrimeNG表显示其为默认分页器。 But I want to make it pretty.
但我想使其漂亮。
How can I do this? 我怎样才能做到这一点? Please help me.
请帮我。
The PrimeNG has paginator
component along with the list of structural style classes. PrimeNG具有
paginator
组件以及结构样式类列表。 You have to read the theme documentation for customization. 您必须阅读主题文档以进行自定义。 Here is the list of selectors you can use to set your own styles using CSS:
以下是选择器的列表,您可以使用它们使用CSS设置自己的样式:
Name Element
ui-paginator Container element.
ui-paginator-first First page element.
ui-paginator-prev Previous page element.
ui-paginator-pages Container of page links.
ui-paginator-page A page link.
ui-paginator-next Next page element.
ui-paginator-last Last page element.
ui-paginator-rpp-options Rows per page dropdown
Learn more here: PrimeNG Paginator 在此处了解更多信息: PrimeNG Paginator
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.