Ngx-datatable: page limit with select options not working

[rahuldev761]

I'm submitting a ... (check one with "x")

[ *] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
page limit is not working when I bind limit with select option.I want to change page limit according to which limit I select using select option list like 5,10.

Expected behavior
I want to bind page limit value with select option list when I change option then page limit also change.It also work with pagination

• Table version: 0.7.x
  2.2.3

• Angular version: 2.0.x
  2.0.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[amcdnl]

Please make a demo.

[atalis]

@rahuldev761, did you get this working? My team is evaluating this component for our application. Pagination with page size selection is a must for us, so I want to make sure this is working.

[amcdnl]

I need a demo to test this.

[szlezak]

I too would like to set number of items per page dynamically

Here is an example:

example.component.ts

export class ExampleComponent {
  LIMITS = [
    { key: ‘10', value: 10 },
    { key: '25', value: 25 },
    { key: '50', value: 50 },
    { key: '100', value: 100 }
  ];

  limit: number = LIMITS[0].value;
  rowLimits: Array<any> = LIMITS;

  changeRowLimits(event) {
    this.limit = event.target.value;
  }
}

example.component.html

<div>
    <ngx-datatable [limit]=”limit"></ngx-datatable>

    <div>
        <span>Select row limit: </span>
        <select (change)=”changeRowLimits($event)”> 
            <option *ngFor="let limit of rowLimits" [value]=”limit.value”>{{limit.key}}</option>
        </select>
    </div>
</div>

[rotemx]

@szlezak @atalis @rahuldev761
try to reload the row data after changing the limit programatically, it worked for me.
for example :

limit = newLimit;;
rows = {};
rows = rows_data;

[jfinci1]

I think this should be reopened as the above workaround doesn't work currently and the plugin dosnt respond to limit changes. Changing the limit programmatically is definitely a needed feature

[piuskamil]

hi, this works for me :
this.table.limit = this.limit; window.dispatchEvent(new Event('resize'));

[iftekharulislam]

@amcdnl
I was also trying to limit selection option. But its not updating correctly. I have created a plnkr.

My need

1. Use ng-bootstrap pagination. I needed custom footer to display another component at footer. That working fine, but the pagination breaks.
2. Update rows per page

Reproduction step

1. Load the page
2. Try the pagination first (10 rows per page). It works fine this time.
3. Now change the rows per page value by dropdown at top to 5. You can see that the table is still showing 10 entries.
4. Now try changing the pagination. You can see that the first item is the correct one that should be displayed on that paging configuration, but the number of rows shown is not consistent. Its always increasing. with page change. (suppose the pagesize is 5, then you can see that in this pagination, the first item will be 11 for the page 3, but there are more than 5 items on that page)

Can you tell me what I am missing? or can you give me the edited plunkr to solve this ?

[iftekharulislam]

@rotemx - I tried your solution too. But this only works for the first and last page in my scenario. If you go in any page other than 1 or the last page, you can see the problem in this plunkr

[hath74]

Here is what worked for me.

component.ts:

ipp: number = 100;

itemsPerPage = new FormControl('100');

@ViewChild('datatable') table: any;

pageLimit(num: number) {
    this.ipp = Number(num);
    if (this.userList) this.table.pageSize = Number(num);
  }

onPage(event) {
    this.table.limit = Number(this.itemsPerPage.value);
    this.offset = event.offset;
  }

component.html:

```

Items per page
10
25
50
100
200

[offset]="offset" [limit]="ipp" (page)="onPage($event)" *ngIf="userList">

```

[iftekharulislam]

I found my mistake. The problem was with the value binding of select element. when we use [value] binding, it only works for strings. As a result page limit was setting the value as a string. On that case, internal first index calculation was working fine, but last index gets undefined, as a result it always showing all results from that page's first index to the last data item.

the solution is to use [ngValue] binding. It works for custom objects. So onPageSizeChange event is now passed a number value for page size. So everything is working fine.

Updated plunkr