CODEWITHSUNDEEP
angularpaginationng2-bootstrap
Winnemucca
Winnemucca

Reputation: 3458

paginating with angular 2 unable to set items per page

I installed ng2-bootstrap for a a simple pagination component. From the documentation (https://valor-software.com/ng2-bootstrap/#/pagination#pager-component) setting up the component seems pretty simple.

However, I am not able to set items per page. I followed the example and imported the module like so

    PaginationModule.forRoot(),

I added properties necessary

maxSize:number = 5;
bigTotalItems:number = 726;
bigCurrentPage:number = 1;
numPages:number = 0;
itemsPerPage: number = 10;  // **** this is the one not working

I added the selector and attributes like the documentation shows

<pagination 
            class="pagination-sm"
            [totalItems]="bigTotalItems" 
            [(ngModel)]="bigCurrentPage" 
            [maxSize]="maxSize" 
            [boundaryLinks]="true" 
            [rotate]="false" 
            [itemsPerPage]="itemsPerPage"
            (numPages)="numPages = $event">
        </pagination>

Everything shows up but the pages are not limited to 10. everything shows up on one page.

In the component for the node modules/github page (https://github.com/valor-software/ng2-bootstrap/blob/development/src/pagination/pagination.component.ts) items per page is constructed like so

this.itemsPerPage = typeof this.itemsPerPage !== 'undefined'
  ? this.itemsPerPage
  : this.config.itemsPerPage;

I made sure that my pagination selector is directly below the decorator

*ngFor

I just cannot tell why I am unable to set itemsPerPage correctly.

Upvotes: 0

Views: 1239

Answers (1)

websterd
websterd

Reputation: 51

To continue this from the issue on ng2-bootstrap you are not indicating how you are dividing your data for display based on the settings for the pagination component. The pagination component is a device for keeping track of how you want your information subdivided into pages and for notifying that a desired page has changed. It does not display the pages for you - your code has that responsibility.
The plunker referenced in the issue shows one method of doing this where a subset of the information held in the array is fed to the display depending on the page selected and the number of items per page. It does this by calling a function to build the page contents when a pageChanged event occurs.
You also asked about the itemsPerPage < 1 comment. This was purely to point out that if you have somehow set the itemsPerPage to a number less than 1 then everything will be displayed on one page. The plunker did not trap this condition and failed to display anything - I have updated the plunkter so it now behaves as it should.

Upvotes: 0

Related Questions