import {NgbPaginationConfig} from "@ng-bootstrap/ng-bootstrap";
import {Input,Component} from "@angular/core";
@Component({
    selector: 'table-sortable',templateUrl: './table-sortable.html',providers: [
        NgbPaginationConfig
    ]
})
export class TableSortable {

    @Input() columns: any[];
    @Input() data: any[];
    @Input() sort: any;
    page:number = 1;
    pageSize:number = 10;

    constructor(config: NgbPaginationConfig) {
        // customize default values of paginations used by this component tree
        config.size = 'sm';
        config.boundaryLinks = true;
        config.pageSize = this.pageSize;
    }

    selectedClass(columnName): any {
        return columnName == this.sort.column ? 'sort-' + this.sort.descending : false;
    }

    changeSorting(columnName): void {
        var sort = this.sort;
        if (sort.column == columnName) {
            sort.descending = !sort.descending;
        } else {
            sort.column = columnName;
            sort.descending = false;
        }
    }

    convertSorting(): string {
        return this.sort.descending ? '-' + this.sort.column : this.sort.column;
    }
}

<table class="table table-hover table-striped table-sortable">
    <thead>
    <tr>
        <th *ngFor="let column of columns" [class]="selectedClass(column.variable)" (click)="changeSorting(column.variable)">
            {{column.display}}
        </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let object of data | orderBy : convertSorting() | paging: page: pageSize">
        <td *ngFor="let column of columns">
            {{object[column.variable] | format : column.filter}}
        </td>
    </tr>
    </tbody>
</table>
<div class="row">
    <div class="col-xs-3">
        共{{data.length ? data.length : 0}}条数据  当前第{{page}}页
    </div>
    <div class="col-xs-9">
        <ngb-pagination [collectionSize]="data.length" [(page)]="page"></ngb-pagination>
    </div>
</div>