Angular2 - Table 使用 *ngFor 进行分页和排序

Question

我在 Angular 2.

中使用 *ngFor 创建了一个简单的 html table

我的问题是，

有没有一种简单的方法可以在不使用任何额外的第三方 JavaScript 的情况下向同一个 table 添加排序和分页？

angular2 是否提供任何技术来实现相同的目标？

Answer 1

Angular 没有 built-in 排序 table 的方法。您要么必须自己连接 table headers 中的事件，要么使用第三方组件。 PrimeNG 不仅如此。

更新： 如果您想自己执行此操作，"filters" (Angular 1) 的等价物是 Angular 2 中的管道。这是很好的指南：http://voidcanvas.com/angular-2-pipes-filters/

Answer 2

我一直在尝试在不使用第 3 方库的情况下在 angular 中动态构建和分页我的 table。围绕这一愿望的一些考虑可能包括以下一些或更多：

每 table 页的项目数。您希望用户指定它们还是硬编码？
处理点击事件，即首先，<>最后

下面的代码我用来动态生成页码(P2,...,Pn)

声明一个变量 (pagenumbers) 来保存页码 HTML

pagenumbers = '<li class="page-item disabled clearfix d-none d-md-block"><a class="page-link waves-effect waves-effect">First</a></li><li class="page-item-disabled"><a class="page-link" aria-label="Previous"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li><li class="page-item active"><a class="page-link">1</a></li>';

调用服务获取客户列表：

async getCustomerOrders(CustomerID: number, customerService: CustomerService) {
    await customerService.getCustomerOrders(CustomerID)
    .map((res) => res)
    .subscribe(
        data => {
            this.customerOrders = data;
            this.tot = this.customerOrders.length;
            console.log('Total records: ' + this.tot);
            this.workingWithLoop(this.tot / 10);
        },
        err => console.log(err),
        () => console.log(this.customerOrders.length / 10)
    );
}

页码：

workingWithLoop(pages: number) {
    // let pageNumbers = '';
    console.log(this.pagenumbers);
    console.log('Total pages: ' + pages);
        for (let n = 2; n < pages; n++ ) {
            console.log('Value of n: ' + n);
            this.pagenumbers += '<li class="page-item"><a class="page-link waves-effect waves-effect">' + n + '</a></li>';
    }
    // tslint:disable-next-line:max-line-length
    this.pagenumbers += ' <!--Arrow right--><li class="page-item"><a class="page-link" aria-label="Next"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li><!--First--><li class="page-item clearfix d-none d-md-block"><a class="page-link">Last</a></li>';
}

在我的 html 中，使用 table 底部的以下代码作为页码

<nav class="my-4 pt-2">
            <ul class="pagination pagination-circle pg-purple mb-0" [innerHTML]="pagenumbers">
            </ul>
        </nav>

我仍在致力于动态生成分页 table 分页 table。

Angular2 - Table 使用 *ngFor 进行分页和排序

Angular2 - Table using *ngFor with paging and sorting

sorting

paging

html-table

ngfor

angular