Add an option to stay on the current page when sort is applied

[maxtacco]

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

[ x] bug report => search github for a similar issue or PR before submitting
[ x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior Currently DataTableComponent sets offset to 0 in onColumnSort method when sort is applied.
But, it is not really required to do so in this case because the number of rows should not change during sort.

Also, this doesn't quite work with server side pagination and sorting - the result that is displayed in this case is from page N, but the offset is set to 0 and footer displays incorrect page number as a consequence.

Expected behavior No need to reset offset to 0 when column is sorted. The offset can be reset programmatically if needed. At least add an option NOT to reset offset to 0 when column is sorted.

Reproduction of the problem Try to use server side pagination and sorting at the same time. Navigate to page N and sort a column. In this case the result from page N are displayed but the footer displays page 1 that does not correspond to the actual results returned.

Please tell us about your environment: Mac os X

• Table version: 0.8.x 9.1.0

• Angular version: 2.0.x 4.1.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 ] Chrome

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

[amcdnl]

This is by design. We've been back and forth on this issue but I believe this is the best behavior given if you sort your data changes so dramatically the current page you are on is no longer relevant. What's the use case why you would want to stay on the current page?

[maxtacco]

Hi @amcdnl, The use case is server side pagination / sorting. For example, I'm on page 5 and sort by id column, the server returns the sorted results but those results are still for page 5, not page 1. So, in this case I have to make sure I reset the page object to the initial values programmatically before sorting (i. e. page 1). Otherwise I end up with results for page 5 but footer displays it is page 1. Note, that with current implementation it is difficult to implement pagination / sorting that stays on the same page after sort. But, it would be pretty simple to reset the page object to initial values before sorting if necessary even if the offset wasn't reset to 0.

[maxtacco]

To continue, I would expect the page to stay the same when sorting by default. If someone wants to reset the page to 1 before sorting that's fine, but it is trivial to implement. But, what are my options to stay on the same page after sort if I want? Currently, it is not that trivial at all.

[maxtacco]

Sorry, one last thing to make it clear. The pager should respect the results returned from the server instead of simply resetting the offset to 0.

[timwright35]

I agree with maxtacco on this, when externalPaging is true, the page should stay where it was on sort, letting the server handing what is needed on the page and how the pagination works. What I would expect at least from the externalPaging option.

[jrhite]

I just hit this awkwardness too. I've been reading through this issue and some of the others, in particular issue #515 (being on page 4, filtering so there are only 2 pages of data, and ending up with 0 results, because you're on page 4).

For filtering, page reset to page 1 make sense. For sorting this doesn't make sense to me. Sorting will never change the result count so you'll never end up left on an empty page.

The philosophy of ngx-datatable seems to be pretty hands-off, not making assumptions, so why make assumptions with sorting? Let sort stay on the same page, or let the developer explicitly choose to change back to page 1.

Just my ฿0.02.

[andrii-oleksyshyn]

Can we have a comment from dev team?

[chan71]

Any update on this?

[chan71]

Found a workaround. Add id to refer by in the html file where the ngx-datatable is used.

<ngx-datatable
  #myTable
  ...
>

Get a reference to the ngx-datatable using @ViewChild annotation. @ViewChild('myTable') table: any;

Reset the page after server side sort results are set.

// set server side sort results
this.rows = result.events;
// reset page
this.table.bodyComponent.updateOffsetY(pageNumber);
this.table.offset = pageNumber;

Hope this helps until setting page to 0 upon sorting is removed.

[FrancescoBorzi]

I can confirm the issue. It looks a serious one. @amcdnl I think there are many use cases out there. Plus the value bound to [offset] will still be the original value and not 0, which leads to an inconsistent state.

@chan71 sorry but your solution does not work, for me this.table is undefined

[dpollastrini]

@chan71, I can confirm the workaround works. this.table.offset = pageNumber seems to be sufficient in my case. What does this.table.bodyComponent.updateOffsetY(pageNumber) do? Are there side-effects to not using it?

I completely agree with @ShinDarth. Having [offset], the bound value, and the page content all out of sync after an external paged sort is a serious flaw.

@amcdnl, I think it is more reasonable to let the developer make the presumption that a given paged sort causes a condition where "data changes so dramatically the current page you are on is no longer relevant". In such cases, we should be making the decision by explicitly settings the offset (via "pageNumber") before we query our external data and not have to worry about presumptions the control may be making after the fact, or by having to resort to kludgey workarounds.

Loving ngx-datatable in every way. Thanks for your hard work!!

[ZeevKatz]

Any update on this?

[tatighm]

I just realized this post is really old, but it is still OPEN, so here it is. I am doing server-side pagination. I am setting these for the table: #fbaSalesTable ... [externalPaging]="true" [count]="count" [offset]="pageNumber" [limit]="10" (sort)="onSort($event)" [sorts]="[{prop: 'purchaseDate', dir: 'desc'}]"

I get a reference to the ngx-datatable using @ViewChild annotation. @ViewChild('fbaSalesTable') table: any;

then I use it in my onSort function:

onSort(event) { this.table.offset = this.pageNumber - 1; };

This is working for me. Hope it helps someone.

[harvanchik]

I just realized this post is really old, but it is still OPEN, so here it is. I am doing server-side pagination. I am setting these for the table: #fbaSalesTable ... [externalPaging]="true" [count]="count" [offset]="pageNumber" [limit]="10" (sort)="onSort($event)" [sorts]="[{prop: 'purchaseDate', dir: 'desc'}]"

I get a reference to the ngx-datatable using @ViewChild annotation. @ViewChild('fbaSalesTable') table: any;

then I use it in my onSort function:

onSort(event) { this.table.offset = this.pageNumber - 1; };

This is working for me. Hope it helps someone.

This doesn't seem to work for me. I've tried so many different things including this, and my table always pages to the last page.

[tatighm]

@harvanchik sorry for the delayed response, were you able to resolve your problem? If not, could you provide a code snippet or description of your logic? Are you using pagination? If so, client or server side?

[harvanchik]

@tatighm No worries. I appreciate the response though. It's been a while since I last looked at the project with the issues. I doubt I would be able to provide anything useful, since I've forgotten most of it myself. Thanks for reaching out anyways.

[adodrndarr]

In case someone still has issues with this, a potential workaround could be to reset the table offset, to the one of the current page, so that the user stays on the same page when sorting...

--- ts --- @ViewChild('table') table: any;

onSort(event: any): void { ----> this.table.offset = this.table?.bodyComponent?.offset; // stay on same page when sorting... }

--- html --- <ngx-datatable #table (sort)="onSort($event)" > ... </>ngx-datatable>

This is working for me. Hope it helps someone.