Diagnosing Server‑Side Pagination Failures in Vuetify 3 v‑data‑table

Problem: Table Stuck on Loader or Shows No Rows

You open a page that uses v-data-table with server-items-length and :server-items-length="total". The network tab reports a 200 OK response, yet the table either spins forever or renders an empty body. No JavaScript errors appear in the console.

Cause / Diagnostic Quick‑Reference

Ordered Diagnostic Checks

1. Inspect the outbound request. Open DevTools → Network, filter XHR/Fetch, click the pagination request. Verify:
   • HTTP method (usually GET).
   • Query string matches the table’s current page and page size.
   • Request headers include Accept: application/json.
2. Validate the server response shape. The JSON must be:

   {
     "totalCount": 342,
     "items": [
       { "id": 1, "name": "Alpha" },
       { "id": 2, "name": "Beta" }
     ]
   }

   • totalCount (integer) – total rows across all pages.
   • items (array) – exactly the slice for the requested page.
3. Confirm component prop bindings. In the <v-data-table> template ensure:

   <v-data-table
     :items="rows"
     :items-per-page="pageSize"
     :server-items-length="total"
     :loading="isLoading"
     @update:options="fetchPage"
   >
     <!-- column slots -->
   </v-data-table>

   • rows receives the items array.
   • total receives totalCount.
   • isLoading is set to true before the request and false after.
   • fetchPage reads options.page and options.itemsPerPage to build the request.
4. Ensure server-items-length is a number, not a string. Vue will coerce but a non‑numeric value can keep the pager disabled.
5. Test the endpoint directly. Run in a terminal (requires network access, no special permissions):

   curl -G "https://api.example.com/items" \
     --data-urlencode "page=1" \
     --data-urlencode "itemsPerPage=20" \
     -H "Accept: application/json"
   

   Expected: HTTP 200, JSON with totalCount and items. Risks: if the API requires authentication, add -H "Authorization: Bearer <token>".

Fixes Mapped to Findings

async function fetchPage(options) {
  isLoading.value = true
  try {
    const { data } = await api.get('/items', { params: options })
    rows.value = data.items
    total.value = data.totalCount
  } finally {
    isLoading.value = false
  }
}

app.get('/items', (req, res) => {
  const page = Number(req.query.page) || 1
  const size = Number(req.query.itemsPerPage) || 20
  const offset = (page - 1) * size
  const rows = await db.select().limit(size).offset(offset)
  const [{ total }] = await db.count('*').from('items')
  res.json({ totalCount: total, items: rows })
})

const params = {
  pageNumber: options.page,
  pageSize: options.itemsPerPage
}

app.use(cors({ origin: 'https://your-app.com' }))

Escalation Criteria

• After applying the fixes above, the table still shows a spinner > 5 seconds on a fast network – involve the backend team to verify latency and payload size.
• Console shows TypeError: Cannot read property 'length' of undefined – likely a version mismatch (Vuetify 2 syntax used in a v3 project). Upgrade the component usage to the v3 API.
• Intermittent empty pages on high page numbers – check database offset/limit logic for off‑by‑one errors.

Limitations & Scope

• Applies to Vuetify 3.x (v-data-table with server-items-length). Vuetify 2 uses pagination.sync and different prop names.
• Assumes a REST‑like JSON endpoint; GraphQL or custom transport layers need analogous checks.
• Does not cover client‑side sorting/filtering combined with server pagination – those require additional @update:options handling.

Verification Checklist

1. Reload the page; the first page renders rows and the spinner disappears within 2 seconds.
2. Open DevTools → Network; the pagination request returns 200 with totalCount and an items array of the expected length.
3. In Vue DevTools, confirm isLoading toggles true → false and rows / total update.
4. Navigate to page 2, 3, and the last page; each loads without error.

When all checklist items pass, the server‑side pagination is functioning correctly. If any step fails, revisit the corresponding diagnostic row and apply the mapped fix.