angular2 table 可排序 可翻页

export class RComponent implements OnInit {

    data: any;

    ngOnInit() {
        this.data = require('../data/hengxiangduibi.json');
    }

    rows: any[] = [
        {
            Name: 'Data 1',Amount: 100.23,Date: 1477545980000
        },{
            Name: 'Data 2',Amount: 0.875623,Date: 1477545989000
        },{
            Name: 'Data 3',Amount: .010123,{
            Name: 'Data 4',Amount: 1873.02301,{
            Name: 'Data 5',Amount: -93,Date: 1477545983000
        },{
            Name: 'Data 1',Date: 1477545983000
        }
    ];
    columns: any[] = [
        {
            display: 'Column 1',//The text to display
            variable: 'Name',//The name of the key that's apart of the data array
            filter: 'text' //The type data type of the column (number,text,date,etc.)
        },{
            display: 'Column 2',//The text to display
            variable: 'Amount',//The name of the key that's apart of the data array
            filter: 'decimal : 1.0-2' //The type data type of the column (number,{
            display: 'Column 3',//The text to display
            variable: 'Date',//The name of the key that's apart of the data array
            filter: 'dateTime' //The type data type of the column (number,etc.)
        }
    ];
    sorting: any = {
        column: 'Name',//to match the variable of one of the columns
        descending: false
    };

}

<table-sortable
        [columns]="columns"
        [data]="rows"
        [sort]="sorting">
    Loading table...
</table-sortable>

效果：

还有小瑕疵，不影响使用

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!