时间戳

首页 > 解决方案 > 如何获得服务器端分页但客户端排序

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

问题描述

我正在使用 Angular Material 的数据网格。我能够从服务器端加载数据并且排序和分页都可以工作，但是我试图只对目前桌子上的项目进行排序，而不是从服务器端进行排序。

<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>

在我的 TS 中，我了解我正在调用服务器端排序所需的排序合并。但我只想做客户端排序。

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;
}}

模型看起来像这样

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

}

更新

我将数据源转换为

  dataSource: MatTableDataSource<Account>

并且我在加载数据后从合并和填充数据源的排序中删除了排序

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

但没有奏效。

标签： angularangular-materialangular-material-table

解决方案

我将数据源转换为 MatTableDataSource，并在加载数据后从合并和填充数据源的排序中删除了排序

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

问题是我在分配给数据源时没有做新的MatTableDataSource。

推荐阅读