【问题标题】:Get current page and move to specific page in NgPrime datatable获取当前页面并移动到Primeng数据表中的特定页面
【发布时间】:2017-06-27 06:03:32
【问题描述】:

我正在使用来自 primefaces - primeNg 的数据表。我可以获取我所在的当前页面并以编程方式将数据表设置为特定页面吗?

我看到数据表在里面使用了分页组件,但是如何使用@ViewChild 来访问它呢? 任何帮助将不胜感激。

【问题讨论】:

    标签: angular primeng primeng-datatable


    【解决方案1】:
    <p-dataTable #dt [value]="items" [rows]="10" [paginator]="true" [(first)]="first"  (onPage)="paginate($event)">
    

    解决方法 - 以编程方式将数据表设置为特定页面。

    @ViewChild('dt') dataTable: DataTable;
    
    setCurrentPage(n: number) {
        let paging = {
        first: ((n - 1) * this.dataTable.rows),
        rows: this.dataTable.rows
    };
    this.dataTable.paginate(paging);
    }
    // this.setCurrentpage(pageNumber) will set table to given page number
    

    要获取您所在的当前页面,请使用这样的 (onPage) 事件

    paginate(event) {
    //event.first: Index of first record being displayed 
    //event.rows: Number of rows to display in new page 
    //event.page: Index of the new page 
    //event.pageCount: Total number of pages 
    let pageIndex = event.first/event.rows + 1 // Index of the new page if event.page not defined.
    }
    

    似乎有一个defect 用于以下设置页码的方式,因此您可能需要使用解决方法,直到缺陷被关闭。 根据primeng文档 要以编程方式将数据表设置为特定页面,请使用您要查看的行号设置“第一”。 例如

    this.first = 10 //will show second page, OR
    this.first=20  //will show third page.
    

    【讨论】:

    • 谢谢。使用 [(first)] 我们可以控制分页,但数据表上的数据仍然保持不变。
    • @zennith 我已经修改了解决方法的答案,有一个缺陷是通过记录的方式提出的。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-05-07
    • 2019-10-04
    • 2015-06-27
    • 2011-09-02
    • 1970-01-01
    • 1970-01-01
    • 2014-04-16
    相关资源
    最近更新 更多