DataTables Server‑Side Processing Guide

Problem: Slow initial load with thousands of rows

When a table contains tens of thousands of records, sending the whole dataset to the browser makes the first paint sluggish and wastes bandwidth. Users still need sorting, filtering and pagination, so a pure client‑side approach is not viable.

Thesis: Enable DataTables server‑side mode so only the requested page travels over the network

By setting serverSide: true and pointing ajax to an endpoint that understands DataTables’ request parameters, the library fetches just the slice needed for the current view while preserving interactive features.

How the request‑response contract works

DataTables sends GET parameters such as draw, start, length, search[value], order[0][column] and order[0][dir]. The server must echo draw, return recordsTotal, recordsFiltered and a data array matching the page.

Worked example

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>DataTables server‑side demo</title>
  <link rel='stylesheet' href='https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css'>
  <script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>
  <script src='https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js'></script>
</head>
<body>
<table id='example' class='display' style='width:100%'>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
</table>
<script>
$(function(){
  $('#example').DataTable({
    serverSide:true,
    ajax:{url:'/api/users',type:'GET'},
    columns:[{data:'id'},{data:'name'},{data:'email'}]
  });
});
</script>
</body>
</html>

On the server (Node/Express) you need to read draw, start, length, search[value], order[0][column] and order[0][dir], apply the same filtering and ordering to a SQL query, then JSON‑respond with those values plus the data slice.

Trade‑off

Server‑side mode cuts initial payload but requires the server to replicate search, ordering and pagination logic. Mistakes in the WHERE clause or column mapping cause stale pagination or No data available. Custom renderers must also be reproducible on the server if the column participates in search or sort.

Verification

1. Open the page, open DevTools → Network, filter XHR.
2. Confirm requests contain start, length, search[value] etc.
3. Check the JSON response echoes draw and contains recordsTotal, recordsFiltered and a data array of size length (or less on last page).
4. Change page size via length menu; observe length parameter change and new slice.
5. Type in the global search box; verify search[value] appears and filtered rows return.
6. Click a column header; verify order[0][column] and order[0][dir] appear and data sorted accordingly.

If any check fails, review the server logic for missing WHERE or column‑index mismatch.

Closing

Use serverSide: true for tables with thousands of rows or limited bandwidth. Keep client column definitions in sync with the server’s SELECT list to ensure correct behaviour.