Angular Data-Grid默认pageSize不生效问题求助

It sounds like your Data-Grid isn't picking up the initial itemsPerPage setting because either pagination isn't properly enabled on initialization, the configuration key doesn't match what your library expects, or your data fetching logic isn't applying pagination parameters on the first load. Let's walk through the most likely fixes:

1. Enable Pagination & Initialize Core Values #

First, make sure your grid explicitly enables pagination and sets an initial current page. Many Data-Grid libraries don't activate pagination by default, even if you define a page size. Update your config like this:

$scope.gridOptions = {
  data: [],
  getData: gridListService.getOrdersDataItemcategory,
  sort: { predicate: 'Name', direction: 'asc' },
  itemsPerPage: 5,
  enablePagination: true, // Force pagination to be active on load
  currentPage: 1 // Critical for triggering initial pagination behavior
};

2. Verify the Correct Configuration Key #

Depending on the specific Data-Grid library you're using (e.g., Angular UI Grid, angular-data-grid), the default page size key might differ. For example:

• Angular UI Grid uses paginationPageSize instead of itemsPerPage
• Some libraries expect pageSize as the standard key

Try swapping the key to match your library's documentation:

// Example for Angular UI Grid
$scope.gridOptions = {
  // ...other existing configs
  paginationPageSize: 5,
  paginationPageSizes: [5, 10, 20], // Define your allowed page size options
  enablePaginationControls: true
};

3. Ensure Data Fetching Respects Initial Pagination #

If your getData method handles server-side pagination, confirm that gridListService.getOrdersDataItemcategory receives and uses the itemsPerPage and currentPage parameters on the first load. Your backend should return only the first 5 items when the grid initializes.

For client-side pagination, manually slice the full dataset to the first page when initializing:

// Fetch full data, then slice to match initial page size
gridListService.getOrdersDataItemcategory().then(function(fullData) {
  const pageSize = $scope.gridOptions.itemsPerPage;
  $scope.gridOptions.data = fullData.slice(0, pageSize);
});

4. Check for Accidental Config Overwrites #

Make sure no other code in your app is overwriting the itemsPerPage or pagination settings after you initialize gridOptions. A late-running directive or controller might be resetting these values to defaults without you noticing.

5. Update the Library (If Applicable) #

If you're using an older version of the Data-Grid library, there might be a known bug where the default page size isn't applied on load. Updating to the latest stable version could resolve the issue.

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