ASP.NET Core-6结合ngx-pagination：搜索后分页控件未同步更新问题

1. 先确认后端API的返回逻辑 #

服务端分页的核心是：每次请求（包括带搜索条件的）必须返回筛选后的总数据条数，而不是固定的初始总数。你的JSON响应里必须包含两个核心内容：

• 分页后的数据集（比如data字段）
• 筛选后的总记录数（比如totalCount字段）

示例响应结构：

{
  "data": [/* 分页后的审计记录 */],
  "totalCount": 25  // 搜索后实际的总条数，不是初始的全量总数
}

2. 调整Angular数据模型 #

创建一个专门的分页响应模型，用来接收后端返回的数据集和总条数：

export class PagedAuditResponse {
  data: AuditRecord[];
  totalCount: number;
}

export class AuditRecord {
  // 你的审计记录字段，比如id, auditType, description等
}

3. 修改Angular服务的API调用 #

调用后端时要同时传递搜索条件和分页参数，确保后端能根据筛选条件返回对应的分页数据和总条数：

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { PagedAuditResponse, AuditRecord } from './models';

@Injectable({ providedIn: 'root' })
export class AuditService {
  private apiUrl = 'api/audits';

  constructor(private http: HttpClient) {}

  getAudits(auditType: string, pageNumber: number, pageSize: number): Observable<PagedAuditResponse> {
    let params = new HttpParams()
      .set('pageNumber', pageNumber.toString())
      .set('pageSize', pageSize.toString());
    
    // 有搜索内容时，把条件加到请求参数里
    if (auditType.trim()) {
      params = params.set('auditType', auditType);
    }

    return this.http.get<PagedAuditResponse>(this.apiUrl, { params });
  }
}

4. 组件逻辑关键修正 #

组件里要维护totalItems变量（ngx-pagination依赖它计算页码数），每次搜索或分页切换时，都要从后端获取最新的总条数并更新这个变量：

import { Component, OnInit } from '@angular/core';
import { AuditService } from './audit.service';
import { AuditRecord } from './models';

@Component({
  selector: 'app-audit-list',
  templateUrl: './audit-list.component.html'
})
export class AuditListComponent implements OnInit {
  audits: AuditRecord[] = [];
  totalItems = 0; // 分页控件依赖的总条数
  currentPage = 1;
  pageSize = 10;
  searchAuditType = '';

  constructor(private auditService: AuditService) {}

  ngOnInit(): void {
    this.loadAudits();
  }

  // 统一加载数据的方法，包含搜索条件和分页参数
  loadAudits(): void {
    this.auditService.getAudits(this.searchAuditType, this.currentPage, this.pageSize)
      .subscribe(response => {
        this.audits = response.data;
        this.totalItems = response.totalCount; // 重点：更新总条数，分页控件才会同步变化
      });
  }

  // 搜索操作（点击按钮或回车触发）
  onSearch(): void {
    this.currentPage = 1; // 搜索后必须重置到第一页，避免数据不匹配
    this.loadAudits();
  }

  // 分页切换时触发
  pageChanged(page: number): void {
    this.currentPage = page;
    this.loadAudits();
  }
}

5. 视图代码调整 #

确保ngx-pagination的totalItems绑定的是更新后的变量，同时搜索操作能正确触发数据重载：

<!-- 搜索输入框 -->
<input type="text" [(ngModel)]="searchAuditType" placeholder="搜索审计类型" (keyup.enter)="onSearch()">
<button (click)="onSearch()">搜索</button>

<!-- 审计记录列表 -->
<ul>
  <li *ngFor="let audit of audits | paginate: { itemsPerPage: pageSize, currentPage: currentPage, totalItems: totalItems }">
    {{ audit.auditType }} - {{ audit.description }}
  </li>
</ul>

<!-- 分页控件 -->
<pagination-controls (pageChange)="pageChanged($event)"></pagination-controls>

后端关键逻辑补充（ASP.NET Core） #

要确保后端根据搜索条件正确计算总条数，而不是返回固定值：

[HttpGet]
public async Task<IActionResult> GetAudits([FromQuery] string auditType, [FromQuery] int pageNumber = 1, [FromQuery] int pageSize = 10)
{
    var query = _context.AuditRecords.AsQueryable();

    // 应用审计类型筛选
    if (!string.IsNullOrEmpty(auditType))
    {
        query = query.Where(a => a.AuditType.Contains(auditType));
    }

    // 计算筛选后的总条数
    var totalCount = await query.CountAsync();

    // 分页查询数据
    var data = await query
        .Skip((pageNumber - 1) * pageSize)
        .Take(pageSize)
        .ToListAsync();

    return Ok(new { data, totalCount });
}

内容的提问来源于stack exchange，提问作者Ayobamilaye