Lazy DataTable Sort behaves strange

[CC84]

I have a table :

Code: Select all

<p-dataTable *ngIf="ShowTable" [value]="List?.Value?.Items" [lazy]="true" [rows]="Rows"
               [paginator]="true" [totalRecords]="List?.Value?.TotalCount" (onLazyLoad)="OnLoadLazy($event)"
               selectionMode="single" (onRowSelect)="OnRowSelect($event)" sortField="Name" sortOrder="1">
    <p-column field="Id" header="Id" [filter]="true" [sortable]="true" style="width:70px"></p-column>
    <p-column field="Name" header="Name" [filter]="true" [sortable]="true"></p-column>
</p-dataTable>

In my initial LazyEvent i get the correct eventdata and set my ListValues to:

Code: Select all

{"Page":1,"PageSize":5,"TotalCount":10,
"Items":[
  {"Id":18,"Name":"adsfdsafdsafsadf"},
  {"Id":10,"Name":"asdf"},
  {"Id":11,"Name":"asdf"},
  {"Id":9,"Name":"blubbasdfsaasdf"},
  {"Id":1,"Name":"FirmaB"}
]}

But the Datatable changes this order to

  {"Id":1,"Name":"FirmaB"},
  {"Id":18,"Name":"adsfdsafdsafsadf"},
  {"Id":10,"Name":"asdf"},
  {"Id":11,"Name":"asdf"},
  {"Id":9,"Name":"blubbasdfsaasdf"}

WHY??????

When paging for and backward the sortorder is correct. Only the initial load shows this strange behavior.

[cagatay.civici]

I think this is a bug, DataTable does a default sort since you have sortField defined however, it should not do it for lazy datatable. As a result, order changes, in lazy mode it is up to you how to do page, sort, filter.

I've created;

https://github.com/primefaces/primeng/issues/133

[daftster]

Hi CC84,

Not to be rude, but can I ask how you did the lazy loading with http? I'm new in Angular and wanted to investigate how lazy loading works with in a real http scenario.

I have a subscription to listen for data:

this._theService.getData()
.subscribe(
dataObj => this.dataobj = dataobj,
error => this.errorMessage =<any>error);
}

and i'm trying to get the data through a service component by:
getData(): Observable<IData[]> {
return this._http.get(this._dataUrl)
.map((response: Response) => <IData[]>response.json())
//.do(data => console.log("All: " + JSON.stringify(data)))
.catch(this.handleError);
}

Thanks,

[CC84]

Well there are tutorials dealing with this, but none of them does it my way.

I've written some Observable encapsulation called AsyncResult, to simplify dealing with them.

It's a generic class, its constructor takes a observable and some handlers. The class contains properties for each state (isLoading, isFailed, isSucceeded) some properties for Errorhandling (statusCode, message) and the result (value).

In the constructor i subscribe to the observable:

observable.catch( resp => this.handleError( resp ) )
.map( resp => this.map( resp ) )
.subscribe( val => this.finished( val ) );

In the methodes i set the properties.

Additionaly for datatables i wrote a generic class containing all the neccessary infos for one request (totalCount, page, pageSize, items).

Hope this was helpful.