paper-data-table icon indicating copy to clipboard operation
paper-data-table copied to clipboard

paper-data-table-pagination doesn't work

Open jfbaquerocelis opened this issue 7 years ago • 2 comments

Hi, I am using this addon and work fine but when I see closest the pagination doesn't work.

image

I know that the variables limit and page should set on my controller, but the actions incrementPage and decrementPage I don't know how to set.

Whatever help is welcome. Regards.

jfbaquerocelis avatar Feb 17 '18 00:02 jfbaquerocelis

I also have problems, but my selects are not working. Increment and decrement page are just actions you have to catch. here is my controller: https://gist.github.com/electronicbites/6ab19768cc0628d02bc7500d24860296

electronicbites avatar Apr 08 '18 20:04 electronicbites

works as described in README.md and with TS too.

template part

 {{paper-data-table-pagination          
          limit=this.model.transactions.pageSize
          limitOptions=this.limitOptions
          total=this.model.transactions.rowCount
          page=this.model.transactions.currentPage
          pages=this.pages
          onChangePage=(action onChangePage)
          onChangeLimit=(action onChangeLimit)
          onIncrementPage=(action onIncrementPage this.model.transactions.currentPage this.model.transactions.pageCount)
          onDecrementPage=(action onDecrementPage this.model.transactions.currentPage)}}

controller part

export default class MyProfile extends Controller {
    limitOptions: number[] = [25, 50, 100]

    get pages(): number[] {
        let model = this.model as profile;

        return Array.from({length: model.transactions.pageCount}, (_, k) => k + 1);
    }

    onIncrementPage(currentPage: number, pageCount: number) {
        currentPage +=1;

        if (currentPage > pageCount)
            return

        this.transitionToRoute('my-profile', { queryParams: { current_page: currentPage }})
    }

    onDecrementPage(currentPage: number) {
        currentPage -=1;

        if (currentPage < 1)
            return

        this.transitionToRoute('my-profile', { queryParams: { current_page: currentPage }})
    }

    onChangeLimit(chosenLimit: number) {
        this.transitionToRoute('my-profile', { queryParams: { current_page: 1, page_zise: chosenLimit }})
    }

    onChangePage(chosenPage: number) {
        this.transitionToRoute('my-profile', { queryParams: { current_page: chosenPage }})
    }
}

on route part, you will need to add this:

 queryParams = {
        current_page: { refreshModel : true},
        page_zise: { refreshModel : true}
    }

this code need to rerender model

d-arkhipenko avatar Feb 25 '19 12:02 d-arkhipenko