Angular 5服务端分页实现求助：分页按钮触发API调用

嘿，我来帮你搞定Angular 5里的服务端分页问题！结合你提到的ngx-pagination工具，再针对你给出的API返回格式，整理了一套可行的实现方案，一步步来：

因为你用的是Angular 5，一定要装对应版本的ngx-pagination——高版本（比如v6+）只支持Angular 6及以上，这大概率是你之前没生效的原因！

先执行安装命令：

npm install ngx-pagination@3 --save

然后在你要用到分页的模块（比如AppModule或者业务模块）里导入它：

import { NgxPaginationModule } from 'ngx-pagination';

@NgModule({
  imports: [
    // 别忘了加HttpClientModule，不然发不了API请求
    HttpClientModule,
    NgxPaginationModule
  ]
})
export class YourBusinessModule { }

接下来在组件里定义变量、写请求数据的方法，重点要适配你那特殊的API返回格式：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-paginated-table',
  templateUrl: './paginated-table.component.html',
  styleUrls: ['./paginated-table.component.css']
})
export class PaginatedTableComponent implements OnInit {
  // 存储表格数据
  tableData: any[] = [];
  // 前端当前页码（ngx-pagination默认从1开始，你的API从0开始，后面要做转换）
  currentPage = 1;
  // 每页条数，从API返回里取
  itemsPerPage = 5;
  // 总记录数，用来计算分页按钮数量
  totalItems = 0;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    // 页面初始化时加载第一页数据
    this.loadPageData(this.currentPage);
  }

  // 加载指定页码的数据
  loadPageData(pageNumber: number) {
    // 你的API页码从0开始，所以前端的pageNumber要减1再传
    const apiPageNum = pageNumber - 1;
    // 替换成你的真实API地址，参数名要和后端要求一致（比如有的用pageSize代替limit）
    this.http.get(`你的API地址?page=${apiPageNum}&limit=${this.itemsPerPage}`)
      .subscribe((response: any[]) => {
        // 解析API返回：数组第一个元素是pagecount，剩下的是表格数据
        const pageInfo = response[0].pagecount[0];
        // 提取表格数据（过滤掉pagecount那一项）
        this.tableData = response.filter(item => !item.pagecount);
        // 更新分页相关参数
        this.totalItems = parseInt(pageInfo.record_count, 10);
        this.itemsPerPage = parseInt(pageInfo.pagelimit, 10);
        // 同步前端页码（API返回的pagenumber是0，对应前端的1）
        this.currentPage = parseInt(pageInfo.pagenumber, 10) + 1;
      });
  }
}

最后在HTML模板里把表格和分页按钮搭起来，绑定好事件：

<!-- 你的表格，根据实际字段调整样式和内容 -->
<table class="your-table-style">
  <thead>
    <tr>
      <th>字段1</th>
      <th>字段2</th>
      <!-- 其他表头列 -->
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of tableData">
      <td>{{item.你的字段1}}</td>
      <td>{{item.你的字段2}}</td>
    </tr>
  </tbody>
</table>

<!-- ngx-pagination的分页控件，绑定页码变化事件 -->
<pagination-controls
  (pageChange)="loadPageData($event)"
  [currentPage]="currentPage"
  [totalItems]="totalItems"
  [itemsPerPage]="itemsPerPage"
  maxSize="5" <!-- 最多显示几个页码按钮 -->
  directionLinks="true" <!-- 显示上一页/下一页按钮 -->
  previousLabel="上一页"
  nextLabel="下一页"
  autoHide="false">
</pagination-controls>

1. 版本不对直接凉：再确认下ngx-pagination的版本是3.x，执行npm list ngx-pagination就能看到版本号。
2. 页码转换别搞反：你的API用0当第一页，ngx-pagination用1当第一页，这步转换错了的话，点分页按钮会请求错误的页码。
3. API数据解析要准确：你的返回是数组结构，一定要正确提取tableData和pageInfo，不然分页控件拿不到总记录数，就不会显示正确的页码按钮。
4. 检查控制台报错：如果还是没效果，打开浏览器F12看控制台，有没有模块未导入、API请求失败、变量未定义这类错误，一查一个准。

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