Angular 11 + Clarity框架下实现同数组连续数据双表格展示及分页切换的可行性咨询

Absolutely! This is totally doable with Angular 11 and Clarity's data grid. The key idea is to slice your shared data array into two consecutive chunks for each table, and manage a pagination offset to shift these chunks when the user clicks "Next Page". Let's break this down with concrete code examples.

Step 1: Set Up Component Variables #

First, define the necessary variables in your component class to track pagination state and slice the data:

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

@Component({
  selector: 'app-dual-tables',
  templateUrl: './dual-tables.component.html',
  styleUrls: ['./dual-tables.component.css']
})
export class DualTablesComponent {
  // Your shared data source (replace with your actual fruits/employees data)
  employees = Array.from({ length: 20 }, (_, i) => ({
    employeeId: i + 1,
    name: `Fruit ${i + 1}`
  }));

  // Number of items per table (adjust this to your needs)
  itemsPerTable = 5;
  // Total items per "page" (2 tables × items per table)
  itemsPerPage = this.itemsPerTable * 2;
  // Current starting index for the pagination window
  currentStartIndex = 0;

  // Get sliced data for the first table
  get firstTableData() {
    return this.employees.slice(
      this.currentStartIndex,
      this.currentStartIndex + this.itemsPerTable
    );
  }

  // Get sliced data for the second table
  get secondTableData() {
    return this.employees.slice(
      this.currentStartIndex + this.itemsPerTable,
      this.currentStartIndex + this.itemsPerPage
    );
  }

  // Check if there's more data to load
  get hasNextPage() {
    return this.currentStartIndex + this.itemsPerPage <= this.employees.length;
  }

  // Check if we can go back to the previous page
  get hasPreviousPage() {
    return this.currentStartIndex > 0;
  }

  // Handle Next Page click
  nextPage() {
    if (this.hasNextPage) {
      this.currentStartIndex += this.itemsPerPage;
    }
  }

  // Handle Previous Page click (optional but useful)
  previousPage() {
    if (this.hasPreviousPage) {
      this.currentStartIndex -= this.itemsPerPage;
    }
  }
}

Step 2: Build the Template with Clarity Grids #

Now, set up your template with two Clarity data grids, each using their sliced data source, and add pagination controls:

<div class="container">
  <h3>First Table (Items {{ currentStartIndex + 1 }} to {{ currentStartIndex + itemsPerTable }})</h3>
  <clr-datagrid>
    <clr-dg-column>ID</clr-dg-column>
    <clr-dg-column>Name</clr-dg-column>

    <clr-dg-row *clrDgItems="let item of firstTableData" [clrDgItem]="item">
      <clr-dg-cell>{{ item.employeeId }}</clr-dg-cell>
      <clr-dg-cell>{{ item.name }}</clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer *ngIf="firstTableData.length === 0">No items to display</clr-dg-footer>
  </clr-datagrid>

  <h3>Second Table (Items {{ currentStartIndex + itemsPerTable + 1 }} to {{ currentStartIndex + itemsPerPage }})</h3>
  <clr-datagrid>
    <clr-dg-column>ID</clr-dg-column>
    <clr-dg-column>Name</clr-dg-column>

    <clr-dg-row *clrDgItems="let item of secondTableData" [clrDgItem]="item">
      <clr-dg-cell>{{ item.employeeId }}</clr-dg-cell>
      <clr-dg-cell>{{ item.name }}</clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer *ngIf="secondTableData.length === 0">No items to display</clr-dg-footer>
  </clr-datagrid>

  <!-- Pagination Controls -->
  <div class="pagination-controls">
    <button class="btn btn-primary" (click)="previousPage()" [disabled]="!hasPreviousPage">Previous Page</button>
    <button class="btn btn-primary" (click)="nextPage()" [disabled]="!hasNextPage">Next Page</button>
  </div>
</div>

How It Works #

• Data Slicing: The firstTableData and secondTableData getters use JavaScript's slice() method to extract consecutive chunks from your shared employees array. For example, on the first page, firstTableData takes items 0-4 (IDs 1-5) and secondTableData takes items 5-9 (IDs 6-10).
• Pagination Logic: Clicking "Next Page" shifts the currentStartIndex forward by itemsPerPage (10 items), so the next set of tables will show items 10-14 and 15-19 (IDs 11-20 in your example).
• State Checks: The hasNextPage and hasPreviousPage getters ensure pagination buttons are only enabled when valid, preventing invalid index shifts.

Customization Tips #

• Adjust itemsPerTable to change how many items each table displays (e.g., set to 3 for 3 items per table, 6 total per page).
• If your data is loaded asynchronously (e.g., from an API), update the employees array when the data arrives, and reset currentStartIndex to 0 if needed.
• Add loading states or empty state messages for better UX when data is being fetched or no items are available.

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