如何获得服务器端分页但客户端排序

Question

i am using Angular Material's data grid. I am able to load data from server side and sorting and pagination both works, however i am trying to sort only the items that are on the table at the moment instead of sorting from server side.

<div >
<div class="example-table-container" >

    <table mat-table [dataSource]="dataSource" class="example-table" style="color:white" matSort matSortActive="accountNumber"
        matSortDisableClear matSortDirection="desc">
        <!-- Number Column -->
        <ng-container matColumnDef="accountNumber">
            <th mat-header-cell *matHeaderCellDef>Account Number</th>
            <td mat-cell *matCellDef="let row">{{row.accountNumber}}</td>
        </ng-container>

        <!-- Title Column -->
        <ng-container matColumnDef="accountTitle">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Account Title</th>
            <td mat-cell *matCellDef="let row">{{row.accountTitle}}</td>
        </ng-container>

        <!-- State Column -->
        <ng-container matColumnDef="currentBalance">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Current Balance</th>
            <td mat-cell *matCellDef="let row">{{row.currentBalance}}</td>
        </ng-container>

        <!-- Created Column -->
        <ng-container matColumnDef="email">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                Email
            </th>
            <td mat-cell *matCellDef="let row">{{row.email}}</td>
        </ng-container>
         <!-- Created Column -->
         <ng-container matColumnDef="phoneNumber">
            <th mat-header-cell *matHeaderCellDef>
                Phone Number
            </th>
            <td mat-cell *matCellDef="let row">{{row.phoneNumber}}</td>
        </ng-container>
         <!-- Created Column -->
         <ng-container matColumnDef="accountStatus">
            <th mat-header-cell *matHeaderCellDef mat-sort-header >
               Account Status
            </th>
            <td mat-cell *matCellDef="let row">{{row.accountStatus}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

<mat-paginator [length]="resultsLength" [pageSize]="pageSize" style="margin-right: 20px;"></mat-paginator>

In my TS i understand that i am calling merge on sorting which is required for server side sorting. but i want to do just client side sorting.

export class ManageAccountsComponent implements OnInit, AfterViewInit {

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;

constructor(private http: HttpClient) { }
dataSource: Account[] = [];
displayedColumns: string[] = ['accountNumber', 'accountTitle', 'currentBalance', 'email', 'phoneNumber', 'accountStatus'];
resultsLength = 0;
pageSize = 2;
isLoadingResults: boolean;
ngOnInit() {

}
ngAfterViewInit() {

    merge(this.sort.sortChange, this.paginator.page)
        .pipe(
            startWith({}),
            switchMap(() => {
                this.isLoadingResults = true;
                return this.http.get(this.getAccountsUrl());
            }),
            map(data => {
                this.isLoadingResults = false;
                this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
                this.resultsLength = data['@odata.count'];

                return data['value'];
            }),
            catchError((ex) => {
                this.isLoadingResults = false;
                return observableOf([]);
            })
        ).subscribe(data => this.dataSource = data);

}
getAccountsUrl() {
    const href = "https://localhost:44391/odata/Accounts?";
    if (this.paginator.pageIndex == 0) {
        var requestUrl = "";
        requestUrl =
            `${href}$top=${this.pageSize}&$count=true&$orderby=${this.sort.active + ' ' + this.sort.direction}`;

    } else {
        requestUrl =
            `${href}$top=${this.pageSize}&$skip=${this.pageSize}&$count=true&$orderby=${this.sort.active + ' ' + this.sort.direction}`;
    }
    return requestUrl;
}}

and the model looks like this

export interface Account {
accountNumber: string;
accountTitle: string;
currentBalance: string;
email: string;
phoneNumber: string;
accountStatus: string;

}

UPDATE

i converted the datasource to

  dataSource: MatTableDataSource<Account>

and i removed sorting from merge and populated datasource's sort after data is loaded

  ).subscribe(data => {
    this.dataSource = data;
    this.dataSource.sort = this.sort;
  });

but didnt worked.

Answer 1

i converted the datasource to MatTableDataSource and i removed sorting from merge and populated datasource's sort after data is loaded

  ).subscribe(data => {
 this.dataSource = new MatTableDataSource(data);
this.dataSource.sort = this.sort;  });

the problem was that i was not doing new MatTableDataSource when assigning to datasource.