DataTables Server-Side Ajax Pagination (with Laravel)

To create Ajax-based pagination in DataTables — where the table loads one page at a time from the server instead of pulling every row — enable serverSide: true alongside your ajax URL. DataTables then sends start, length, search, order, and draw parameters on every interaction, and your endpoint returns just the slice for the current view.

Contents

Why the original config doesn’t paginate on the server
The fix — serverSide: true
The response shape
Laravel controller example
Frequently asked questions
Related guides
References

Last verified: 2026-05-17 with DataTables 2.0. Originally published 2022-11-06, rewritten and updated 2026-05-17.

Why the original config doesn’t paginate on the server

$('#example').DataTable({
    ajax: 'ajax-url',
    columns: [
        { data: 'id' },
        { data: 'date' },
        // ...
    ],
});

This config tells DataTables to fetch the entire dataset once, then paginate, sort, and search it client-side. There’s no page parameter in the request because DataTables isn’t asking the server to paginate — it has every row already.

The fix — `serverSide: true`

$('#example').DataTable({
    serverSide: true,
    processing: true,
    ajax: '/api/example',
    columns: [
        { data: 'id' },
        { data: 'date' },
        { data: 'period' },
        { data: 'component' },
        { data: 'category' },
        { data: 'created_by' },
        { data: 'action' },
    ],
});

With serverSide: true, every page change, sort click, or search keystroke triggers a new Ajax request with these parameters (see the server-side docs):

draw — request counter (must be echoed back)
start — row offset (e.g. 0, 10, 20…)
length — page size (e.g. 10, 25, 50)
search[value] — current search box value
order[0][column] + order[0][dir] — sort column index + direction
columns[i][data], columns[i][searchable], columns[i][orderable] — per-column metadata

DataTables server-side ajax — request parameters and response shape

The response shape

{
  "draw": 1,
  "recordsTotal": 1000,
  "recordsFiltered": 1000,
  "data": [
    { "id": 1, "date": "2026-05-17", "period": "Q2", "component": "...",
      "category": "...", "created_by": "...", "action": "Edit" },
    ...
  ]
}

draw — the same value the request sent. Required.
recordsTotal — total row count before search (used for the “of N total” label).
recordsFiltered — row count after the search filter. Same as recordsTotal when no search is active.
data — array of rows for the current page (length matches the length param, except on the last page).

Laravel controller example

public function index(Request $request)
{
    $query = Report::query();

    if ($search = $request->input('search.value')) {
        $query->where(function ($q) use ($search) {
            $q->where('component', 'like', "%$search%")
              ->orWhere('category', 'like', "%$search%");
        });
    }

    $columns = ['id', 'date', 'period', 'component', 'category', 'created_by'];
    $orderCol = $columns[$request->input('order.0.column', 0)];
    $orderDir = $request->input('order.0.dir', 'asc');

    $total    = Report::count();
    $filtered = $query->count();

    $rows = $query
        ->orderBy($orderCol, $orderDir)
        ->skip((int) $request->input('start', 0))
        ->take((int) $request->input('length', 10))
        ->get();

    return response()->json([
        'draw'            => (int) $request->input('draw'),
        'recordsTotal'    => $total,
        'recordsFiltered' => $filtered,
        'data'            => $rows,
    ]);
}

Whitelist the orderable columns by index (don’t pass user input straight into orderBy()) and use parameterised where for the search — both like bindings are escaped by Eloquent. For larger datasets, swap skip()/take() for keyset pagination on an indexed column.

Frequently asked questions

What’s the difference between ajax and serverSide: true?

With just ajax, DataTables fetches every row in one request and then handles pagination, sorting, and search on the client. With serverSide: true, DataTables sends the current page, page size, sort, and search to your endpoint on every interaction, and your endpoint returns just the slice for that view. Use server-side when the dataset is too large to ship all at once (rule of thumb: more than a few thousand rows).

What is the draw parameter for, and why does the response have to include it?

draw is a monotonically increasing counter that DataTables sends with each request. Your server must echo it back unchanged in the response. It guarantees responses are rendered in request order even if the network reorders them — an older response with a smaller draw is discarded. Without echoing it, DataTables ignores the response.

How do I read DataTables’ request parameters in Laravel without using a package?

Pull them straight from the request: $request->input('start'), $request->input('length'), $request->input('search.value'), $request->input('order.0.column'), $request->input('order.0.dir'), and $request->input('draw'). Apply skip() + take() with Eloquent, use where(...like) for search, then return JSON in the DataTables shape. The dedicated yajra/laravel-datatables package wraps all of this if you want.

What if my data isn’t paginated at the source — can I still use server-side?

Yes but it defeats most of the benefit. If you load every row into memory and slice in PHP, the server still pays the full query cost on every request. The win only comes when you push start/length down to the database with LIMIT/OFFSET (or keyset pagination), and use a single COUNT(*) query for recordsTotal.