Laravel 11 Datatable Server Side Pagination

Hello, laravel web developers! In this article, we'll see how to add datatable server side pagination in laravel 11. Here, we'll explore how to implement server-side pagination with Laravel 11 and jQuery. Server side pagination is typical as compared to fronted datatable pagination.

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

Laravel 11 Datatable Server Side Pagination with jQuery

Laravel Server-Side Pagination with jQuery


Step 1: Install Laravel 11 Application

We'll install the laravel 11 application using the following command in this step.

composer create-project laravel/laravel laravel-11-application


Step 2: Configure the .env File

Next, we'll configure the database connection into the .env file.




Step 3: Create a model and migration

Then, we'll create a model and migration using the following command.

php artisan make:model Product -m



use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
     * Run the migrations.
    public function up(): void
        Schema::create('products', function (Blueprint $table) {

     * Reverse the migrations.
    public function down(): void



namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
    use HasFactory;
    protected $guarded = [];

Then, migrate the table into the database using the following command.

php artisan migrate

Next, we'll create a Product Factory using the following command.

php artisan make:factory ProductFactory



namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;

 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Product>
class ProductFactory extends Factory
     * Define the model's default state.
     * @return array<string, mixed>
    public function definition(): array
        return [
            'name' => fake()->name(),
            'description' =>fake()->sentence(),
            'amount' => rand(1000, 9999)

Now, run the following command to create dummy records.

php artisan tinker



Step 4: Create Controller

Then, we'll create a controller using the following command.

php artisan make:controller ProductController



namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Log;

class ProductController extends Controller
    public function index()
        return view('products');

    public function getProducts(Request $request){
        // Page Length
        $pageNumber = ( $request->start / $request->length )+1;
        $pageLength = $request->length;
        $skip       = ($pageNumber-1) * $pageLength;

        // Page Order
        $orderColumnIndex = $request->order[0]['column'] ?? '0';
        $orderBy = $request->order[0]['dir'] ?? 'desc';

        // get data from products table
        $query = \DB::table('products')->select('*');

        // Search
        $search = $request->search;
        $query = $query->where(function($query) use ($search){
            $query->orWhere('name', 'like', "%".$search."%");
            $query->orWhere('description', 'like', "%".$search."%");
            $query->orWhere('amount', 'like', "%".$search."%");

        $orderByName = 'name';
            case '0':
                $orderByName = 'name';
            case '1':
                $orderByName = 'description';
            case '2':
                $orderByName = 'amount';
        $query = $query->orderBy($orderByName, $orderBy);
        $recordsFiltered = $recordsTotal = $query->count();
        $users = $query->skip($skip)->take($pageLength)->get();

        return response()->json(["draw"=> $request->draw, "recordsTotal"=> $recordsTotal, "recordsFiltered" => $recordsFiltered, 'data' => $users], 200);


Step 5: Define Routes

Next, we'll define the routes into the web.php file.

use App\Http\Controllers\ProductController;

Route::get('/', [ProductController::class, 'index'])->name('home');

Route::post('/get-products', [ProductController::class, 'getProducts'])->name('getProducts');


Step 6: Create View

Next, we'll create products.blade.php and add the product HTML table. Also, we'll utilize jQuery DataTables to handle the server-side pagination and search functionality.

<!doctype html>
<html lang="en">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="">

    <title>Laravel 11 Datatable Server Side Pagination - Techsolutionstuff</title>


    <div class="container">
        <div class="row">
            <div class="col-12 my-5">
                <h3>Laravel 11 Datatable Server Side Pagination - Techsolutionstuff</h3>
            <div class="col-12">
                <table id="datatable" class="table" style="width:100%">
                    <thead class="table-dark">

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="">
    <script src="">

    <script src=""></script>
    <script src=""></script>
    <script src=""></script>

            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        $(document).ready(function() {
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('getProducts') }}",
                    type: "POST",
                    data: function (data) {
               = $('input[type="search"]').val();
                order: ['1', 'DESC'],
                pageLength: 10,
                searching: true,
                aoColumns: [
                        data: 'name',
                        data: 'description',
                        data: 'amount',




Step 7: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.

php artisan serve


You might also like:


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.