Admin-on-Rest数据网格在TypeScript/React中分页加载异常问题

It sounds like your pagination indicator is calculating total pages correctly (10 pages for 100 records at 10 per page), but the backend isn’t actually slicing data into pages—so all 100 records end up loading on the first page. Let’s break down how to fix this:

Key Background #

Admin-on-Rest relies on your dataProvider to handle pagination logic for GET_LIST requests. When a user loads a list page, AOR sends a request with pagination parameters (page and perPage). Your dataProvider needs to translate these into MongoDB’s skip and limit operations, then return only the records for the requested page plus the total count of matching records.

Step 1: Fix Your DataProvider’s GET_LIST Implementation #

This is almost certainly where the issue lies. Here’s a corrected example of how to handle GET_LIST for MongoDB:

// Inside your custom dataProvider's GET_LIST case
case 'GET_LIST': {
  const { resource, pagination, filter, sort } = params;
  const { page, perPage } = pagination;
  
  // Calculate skip value: (page number - 1) * items per page
  const skip = (page - 1) * perPage;
  const limit = perPage;

  // Convert AOR's filter object to a MongoDB-compatible query
  const mongoQuery = filter ? transformAorFilterToMongo(filter) : {};
  
  // Build sort query (map AOR's sort order to MongoDB's 1/-1)
  const sortQuery = sort 
    ? { [sort.field]: sort.order === 'ASC' ? 1 : -1 } 
    : { createdAt: -1 }; // Default sort if none provided

  // Fetch paginated data AND total count in parallel for efficiency
  const [paginatedData, totalRecords] = await Promise.all([
    db.collection(resource)
      .find(mongoQuery)
      .sort(sortQuery)
      .skip(skip)
      .limit(limit)
      .toArray(),
    db.collection(resource).countDocuments(mongoQuery)
  ]);

  // Convert MongoDB's _id to AOR's required `id` field
  const formattedData = paginatedData.map(doc => ({
    ...doc,
    id: doc._id.toString()
  }));

  // Return the exact format AOR expects
  return {
    data: formattedData,
    total: totalRecords
  };
}

Critical Checks to Verify #

• Are you using skip() and limit() correctly?
  For page 1, skip should be 0 (not 10) to get the first 10 records. Missing the skip() call will return all records every time.
• Is countDocuments() using the same filter as find()?
  If you count all records instead of filtered ones, your pagination indicator will show incorrect total pages when filters are applied.
• Are you returning the correct total value?
  AOR uses total to calculate page count. If total is 100 but data has 100 records, pagination will show 10 pages but all data loads on page 1.
• Are you converting _id to id?
  Admin-on-Rest requires every record to have an id field (MongoDB uses _id by default). While this doesn’t directly cause pagination issues, it can lead to other data display bugs.

Step 2: Debug with Network Requests #

Open your browser’s DevTools > Network tab, find the GET_LIST XHR request:

• Check the request payload to confirm pagination.page and pagination.perPage are sent correctly (should be page: 1, perPage:10 for the first load).
• Check the response: data should have 10 records, total should be 100. If data has 100 records, your backend isn’t applying pagination.

Step 3: Validate MongoDB Query Directly #

Test your query in the MongoDB shell to ensure it returns paginated results:

// Page 1: first 10 records
db.yourCollection.find(yourFilter).skip(0).limit(10).toArray()

// Page 2: next 10 records
db.yourCollection.find(yourFilter).skip(10).limit(10).toArray()

If these return different sets of 10 records, your MongoDB logic is correct—and the issue is in how your dataProvider translates AOR’s parameters to the query.

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