Angular中@cmglez10/ng-datatable分页失效问题求助

Hey there, let's get that page size working as expected. I’ve worked with this library before, so here are the most common fixes to check:

1. Ensure Component Has Proper Page Size Configuration #

First, make sure your component initializes the pageSize property and binds it to the datatable. Here’s a complete example filling in the gaps from your snippet:

/* employee-list.component.ts */
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../shared/employee.service';
import { Employee } from '../shared/employee.model';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
  employees: Employee[] = [];
  // Set your desired page size here
  pageSize = 20;
  currentPage = 1;

  constructor(
    private employeeService: EmployeeService,
    private toastr: ToastrService
  ) { }

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

  loadEmployees(): void {
    this.employeeService.getEmployees().subscribe(
      (data) => {
        this.employees = data;
      },
      (error) => {
        this.toastr.error('Failed to load employees', 'Error');
      }
    );
  }
}

2. Verify Template Setup #

Your template needs to correctly bind the pageSize and enable pagination. Make sure your <ng-datatable> tag includes these attributes:

<!-- employee-list.component.html -->
<ng-datatable
  [rows]="employees"
  [pageSize]="pageSize"
  [currentPage]="currentPage"
  [pagination]="true" <!-- Critical: enables pagination controls -->
  (pageChange)="currentPage = $event"
>
  <!-- Define your columns here -->
  <ng-datatable-column name="ID" prop="id"></ng-datatable-column>
  <ng-datatable-column name="Name" prop="name"></ng-datatable-column>
  <!-- Add other columns as needed -->
</ng-datatable>

Key checks here:

• [pageSize]="pageSize" is bound to your component’s property
• [pagination]="true" is explicitly set (this tells the datatable to respect your page size)
• [rows] points to your loaded data array (employees in this case)

3. Confirm Module Import #

Double-check that you’ve imported NgDatatableModule in your feature or app module:

/* employee.module.ts (or app.module.ts) */
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgDatatableModule } from '@cmglez10/ng-datatable'; // Import the module
import { EmployeeListComponent } from './employee-list/employee-list.component';

@NgModule({
  declarations: [EmployeeListComponent],
  imports: [
    CommonModule,
    NgDatatableModule // Add it to imports
  ]
})
export class EmployeeModule { }

4. Fix Data Loading Timing #

If the datatable renders before your data loads, it might not update automatically. Use ChangeDetectorRef to trigger a manual refresh:

// Add to your component imports
import { ChangeDetectorRef } from '@angular/core';

// Update constructor
constructor(
  private employeeService: EmployeeService,
  private toastr: ToastrService,
  private cdr: ChangeDetectorRef // Inject change detector
) { }

// Update loadEmployees method
loadEmployees(): void {
  this.employeeService.getEmployees().subscribe(
    (data) => {
      this.employees = data;
      this.cdr.detectChanges(); // Force datatable to refresh with new data
    },
    (error) => {
      this.toastr.error('Failed to load employees', 'Error');
    }
  );
}

5. Check for Global Configuration Overrides #

If none of the above works, ensure no global config is overriding your page size. You can set a global default in your AppModule (component-level settings take precedence):

import { NgDatatableModule, NG_DATATABLE_CONFIG } from '@cmglez10/ng-datatable';

@NgModule({
  imports: [NgDatatableModule],
  providers: [
    {
      provide: NG_DATATABLE_CONFIG,
      useValue: {
        pageSize: 20, // Global default
        pagination: true
      }
    }
  ]
})
export class AppModule { }

Give these steps a try, and if you still have issues, share your full template code or any console errors—those will help narrow things down further!

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