angular2 primeNg 表格插件 排序

一、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>

二、組件中的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"
      }
    ];

三、實現排序

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>