Aurelia-Table Paging shows every single page number

[apatton724]

Hey there,

It would be cool if there was a configurable variable to limit the amount of pages in the footer of the table. Currently I have about 1000 rows of data, and only 10 rows per page, so the page count at the bottom is very long.

Would this be possible to add sometime soon?

Thank you.

[tochoromero]

Yeah, that feature is on my list, I just haven't found the time to do it. I will work on it as soon I have a chance.

On the meanwhile in the documentation there is an example of a custom paginator, you could use that to build your own that limits the number of visible pages.

On any case, I will add that feature soon.

[apatton724]

I'll look into the custom paginator.

[tochoromero]

I have an implementation working, I just need to work some edge cases, I hope I can get it ready tomorrow

[apatton724]

Sounds awesome! Thanks man ;)

[tochoromero]

So, I committed the improvement, I think it will get the job done. Would you be so kind to help me test it in master? Once we are happy with it I can make a release and add the documentation. This are the extra options now you have for the pagination control:

    @bindable paginationSize;
    @bindable boundaryLinks = false;
    @bindable firstText = 'First';
    @bindable lastText = 'Last';
    @bindable directionLinks = true;
    @bindable previousText = '<';
    @bindable nextText = '>';

[apatton724]

Thank you sir,

I'll give it a shot!

[apatton724]

i've pulled down and added the @bindables. Outside of that, I'm not sure what else I should change.

Can you provide some code from your JS file and HTML file and I'll recreate it locally to test it out?

Thanks!

[tochoromero]

Well you just need to install the plugin from master (instead of the latest released version), with that you can just specify any of those properties on the pagination like this:

<aut-pagination current-page.bind="currentPage" 
                            page-size.bind="pageSize" 
                            total-items.bind="totalItems" 
                            pagination-size.bind="5"
                            boundary-links.bind="true">

[apatton724]

Hey as your message came through I had just figured it out!

Looking good!

Only thing that looks weird is when I go to the last couple pages, there is no data. So I think my data is ending on page 95, but the plugin shows up to 100 pages.

Any reason why that may be?

constructor(entityManager, orderRepository, router) {

    this.pageSize = 10;
    this.paginationSize = 5;
    this.firstText = "Page 1";
    this.lastText = "Last Page";
    this.currentPage = 1;

    this.selectedMDU = {'name': '', id:0};
}

And the HTML

<div class="col-md-8">
                            <aut-pagination current-page.bind="currentPage" pagination-size.bind="paginationSize" boundary-links.bind="true" first-text.bind="firstText" last-text.bind="lastText" total-items.bind="totalItems"></aut-pagination>
                        </div>

[tochoromero]

My only guess is if the totalITems variable has the wrong number on it... I have code so it stops creating new links once you have reached the end of your items.

[apatton724]

Yea, something's weird. I checked out your code and it looks sound.

I did another test. I limited pageSize to 1. paginationSize is 5. I have a total of 100 items being put into the grid.

It's only showing 20 pages. Which of course doesn't show all 100 items.

If I change pageSize to 10, I still get 20 pages....which is too many pages since I only need 10.

[tochoromero]

That is weird indeed, I will check the code as soon I have chance, thanks for trying it out man.

[apatton724]

You're welcome

[tochoromero]

I have updated the documentation with the examples for the pagination size. It seems to be working as expected. You may want to check it out.