1、html代码
<!-- 表格 -->
<!-- tabVal是一个数组对象,表格的数据,key就是field的名称 -->
<p-dataTable [value]="tabVal" emptyMessage="无记录">
<p-column field='user_name' header='用户姓名' sortable="custom" (sortFunction)="mySort($event)">
<ng-template let-col let-row="rowData" pTemplate="body" style="width: 72px">
<span class="nowrap" pTooltip='{{row.user_name}}' tooltipPosition="top">
{{row.user_name}}
</span>
</ng-template>
</p-column>
<p-column field='reg_qq_number' header='QQ号码' sortable="custom" (sortFunction)="mySort($event)"></p-column>
<p-column field='qq_name' header='QQ昵称'>
<ng-template let-col let-row="rowData" pTemplate="body">
<span class="nowrap" pTooltip='{{row.qq_name}}' tooltipPosition="top">
{{row.qq_name}}
</span>
</ng-template>
</p-column>
<p-column field='orgin_fullname' header='机构全称'>
<ng-template let-col let-row="rowData" pTemplate="body">
<span class="nowrap" pTooltip='{{row.orgin_fullname}}' tooltipPosition="top">
{{row.orgin_fullname}}
</span>
</ng-template>
</p-column>
<p-column field='operation' header='操作'>
<!--
let-col: col这个td的值对象
let-row: row这一行tr的值对象
-->
<ng-template let-col let-row="rowData" pTemplate="body">
<div class="text-center">
<span class="fa fa-copy cursor" ngxClipboard [cbContent]="row.qq_name" (cbOnSuccess)="copyLineInfo($event)"></span>
<span class="fa fa-edit cursor" (click)="editLineInfo(row)"></span>
</div>
</ng-template>
</p-column>
<p-column field='business_label' header='业务标签'>
<ng-template let-col let-row="rowData" pTemplate="body">
<span class="nowrap" pTooltip='{{row.business_label}}' tooltipPosition="top" style="width: 100px">
{{row.business_label}}
</span>
</ng-template>
</p-column>
<p-column field='bind_number' header='代联号' [sortable]="true"></p-column>
<p-column field='like_msg' header='欢迎信息' [sortable]="true"></p-column>
<p-column field='user_come_from' header='用户来源' [sortable]="true"></p-column>
<p-column field='reg_state' header='注册状态' [sortable]="true"></p-column>
<p-column field='create_time' header='创建日期' [sortable]="true"></p-column>
</p-dataTable>
<p-paginator rows="30" totalRecords="100" [rowsPerPageOptions]="[10, 30, 50, 100]" (onPageChange)="paginate($event)"></p-paginator>
</div>
2、组件中的js代码
// 表格数据
this.tabVal = [
{
user_name: "zxc",
reg_qq_number: "2212323232",
qq_name: "爱篮球没理由",
orgin_fullname: "陕西省西安市高新区招商银行支行",
businessLabel: "首付款",
bind_number: "232323",
like_msg: "你好",
user_come_from: "中国",
reg_state: "已注册",
create_time: "2017-7-8"
},
{
user_name: "lzy",
reg_qq_number: "1234766544",
qq_name: "爱篮球没理由",
orgin_fullname: "陕西省西安市高新区招商银行支行",
business_label: "资金,债券一级,债券二级",
bind_number: "232323",
like_msg: "你好",
user_come_from: "中国",
reg_state: "已注册",
create_time: "2017-7-8"
}
];
3、实现排序
A. 使用primeNg默认功能,只需要添加[sortable]="true"
<p-column field='bind_number' header='代联号' [sortable]="true"></p-column>
B. 添加排序方法,调用后台接口,需要如下配置 sortable="custom" (sortFunction)="mySortFun($event)",然后在mySortFun()函数中,获取参数,调用接口排序就可以了。
<p-column field='reg_qq_number' header='QQ号码' sortable="custom" (sortFunction)="mySort($event)"></p-column>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。