Angular 2 表格分页需求：将200行数据按每页10行分页展示

嘿，针对你200行数据每页10行的分页需求，我给你一个纯Angular原生的实现方案，不用引入第三方库，代码简洁易维护：

第一步：修改组件类（.ts文件） #

在你的组件类里添加分页相关的属性和方法，用来控制分页逻辑：

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

@Component({
  selector: 'app-car-table',
  templateUrl: './car-table.component.html',
  styleUrls: ['./car-table.component.css']
})
export class CarTableComponent implements OnInit {
  // 假设这是你的原始200行数据
  cars: any[] = [];
  
  // 分页核心配置
  currentPage = 1;
  pageSize = 10; // 每页固定10行

  // 获取当前页要展示的数据（计算属性，自动响应数据变化）
  get paginatedCars() {
    const startIndex = (this.currentPage - 1) * this.pageSize;
    const endIndex = startIndex + this.pageSize;
    return this.cars.slice(startIndex, endIndex);
  }

  // 获取总页数
  get totalPages() {
    return Math.ceil(this.cars.length / this.pageSize);
  }

  // 跳转到上一页
  goToPreviousPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
    }
  }

  // 跳转到下一页
  goToNextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++;
    }
  }

  // 跳转到指定页码
  goToPage(pageNumber: number) {
    if (pageNumber >= 1 && pageNumber <= this.totalPages) {
      this.currentPage = pageNumber;
    }
  }

  // 组件初始化时加载数据（替换成你的实际接口请求即可）
  ngOnInit() {
    // 模拟生成200条测试数据
    for (let i = 1; i <= 200; i++) {
      this.cars.push({ ID: i });
    }
  }
}

第二步：更新模板文件（.html） #

修改你的表格代码，让它渲染分页后的数据，同时添加分页控制按钮：

<table class="table table-striped table-condensed table-hover table-bordered pointer">
  <thead>
    <th>ID</th>
  </thead>
  <tbody>
    <!-- 遍历分页后的数据，而非原始全量数据 -->
    <tr *ngFor="let car of paginatedCars; let i = index">
      <td>{{car.ID}}</td>
    </tr>
  </tbody>
</table>

<!-- 分页控件 -->
<div class="pagination-controls">
  <button (click)="goToPreviousPage()" [disabled]="currentPage === 1">上一页</button>
  
  <!-- 动态生成页码按钮 -->
  <button 
    *ngFor="let page of Array(totalPages).fill(0).map((x, i) => i + 1)"
    (click)="goToPage(page)"
    [class.active]="page === currentPage"
  >
    {{page}}
  </button>
  
  <button (click)="goToNextPage()" [disabled]="currentPage === totalPages">下一页</button>
</div>

第三步：添加可选样式（.css） #

给分页控件加一点基础样式，让它更美观易用：

.pagination-controls {
  margin-top: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.pagination-controls button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.pagination-controls button.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination-controls button:hover:not(:disabled) {
  background-color: #f5f5f5;
}

.pagination-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

关键说明 #

• 核心逻辑是用Array.slice()方法从原始数据中截取当前页内容，避免一次性渲染200行数据，提升页面性能。
• 页码按钮用Array(totalPages).fill(0).map(...)的小技巧快速生成1到总页数的数组，无需手动拼接。
• 通过[disabled]指令控制按钮状态，防止用户点击无效的分页操作。

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