Laravel Datatables Laravel Package

Getting Started

Minimal Steps

1. Installation:

   composer require yajra/laravel-datatables:^13
   

   Publish config and assets (optional but recommended for customization):

   php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"
   

2. Register Service Providers (Laravel 5.5+): Add to config/app.php:

   Yajra\DataTables\DataTablesServiceProvider::class,
   Yajra\DataTables\ButtonsServiceProvider::class,
   Yajra\DataTables\FractalServiceProvider::class
   

3. First Use Case: Create a route and controller method to return a DataTable response:

   // routes/web.php
   Route::get('users/datatable', [UserController::class, 'datatable']);
   

   // app/Http/Controllers/UserController.php
   public function datatable()
   {
       return DataTables::of(User::query())
           ->addColumn('action', function($user) {
               return '<button class="edit-btn" data-id="'.$user->id.'">Edit</button>';
           })
           ->make(true);
   }
   

4. Frontend Integration: Include DataTables CSS/JS in your Blade view:

   <link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css">
   <script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
   
   <table id="users-table" class="display">
       <thead>
           <tr>
               <th>Name</th>
               <th>Email</th>
               <th>Actions</th>
           </tr>
       </thead>
   </table>
   
   <script>
       $(document).ready(function() {
           $('#users-table').DataTable({
               processing: true,
               serverSide: true,
               ajax: '{{ route("users.datatable") }}',
               columns: [
                   { data: 'name', name: 'name' },
                   { data: 'email', name: 'email' },
                   { data: 'action', name: 'action', orderable: false, searchable: false }
               ]
           });
       });
   </script>
   

Where to Look First

• Documentation: Laravel DataTables Documentation (official and comprehensive).
• Examples: Check the tests directory in the package repository for real-world usage patterns.
• Config File: config/datatables.php for customizing default behaviors (e.g., response formatting, query builder settings).

Implementation Patterns

Core Workflows

1. Basic Eloquent Integration

// Simple DataTable with Eloquent model
return DataTables::of(User::query())
    ->addIndexColumn() // Adds a serial number column
    ->editColumn('name', 'name_edit') // Custom edit column
    ->make(true);

2. Query Builder Integration

// For non-Eloquent queries (e.g., raw SQL or complex joins)
return DataTables::of(
    DB::table('users')
        ->join('roles', 'users.role_id', '=', 'roles.id')
        ->select('users.*', 'roles.name as role_name')
)
    ->addColumn('full_role', function($user) {
        return $user->name . ' (' . $user->role_name . ')';
    })
    ->make(true);

3. Collection Integration

// For non-database collections (e.g., API responses, cached data)
$collection = Cache::get('expensive_data', function() {
    return collect(range(1, 1000))->map(fn($i) => ['id' => $i, 'value' => 'Item ' . $i]);
});

return DataTables::of($collection)
    ->make(true);

4. Server-Side Processing with Custom Logic

// Override default server-side processing
return DataTables::of(User::query())
    ->setTransformer(function($query) {
        // Customize the query before processing
        return $query->where('active', true);
    })
    ->make(true);

Integration Tips

1. Frontend Frameworks

• Livewire:

  public function datatable()
  {
      return DataTables::of(User::query())
          ->addColumn('action', 'users.action')
          ->make(true);
  }
  

  In Livewire component:

  <livewire:datatable wire:model="users" />
  

  Use yajra/laravel-livewire-datatables for seamless integration.

• Inertia.js: Return JSON response from Laravel and process in Vue/React:

  return DataTables::of(User::query())
      ->make(true, true); // Returns raw array for Inertia
  

2. Buttons Extension (Exports, Actions)

return DataTables::of(User::query())
    ->addColumn('action', 'users.action')
    ->addActionColumn(['edit' => 'users.edit', 'delete' => 'users.delete'])
    ->editColumn('name', 'name_edit')
    ->exportOptions([
        'format' => 'xlsx',
        'filename' => 'users_export',
        'buttons' => [
            'excel', 'csv', 'pdf', 'print'
        ]
    ])
    ->make(true);

3. Select Extension (Row Selection)

return DataTables::of(User::query())
    ->selectInput()
    ->make(true);

Frontend:

$('#users-table').DataTable({
    select: true,
    // ... other options
});

4. Editor Extension (Inline Editing)

return DataTables::of(User::query())
    ->editColumn('name', 'name_edit')
    ->editColumn('email', 'email_edit')
    ->make(true);

Frontend:

$('#users-table').DataTable({
    dom: 'Bfrtip',
    buttons: [
        'create', 'edit', 'remove'
    ],
    // ... other options
});

5. Custom Responses

Override default JSON response:

return DataTables::of(User::query())
    ->make(true, true); // Returns raw array

Then format as needed:

return response()->json([
    'data' => $data,
    'recordsTotal' => $recordsTotal,
    'recordsFiltered' => $recordsFiltered,
    'draw' => $draw,
    // Custom fields
    'custom_field' => 'value'
]);

Performance Optimization

1. Selective Column Loading:

   return DataTables::of(User::query())
       ->select(['id', 'name', 'email']) // Only load these columns
       ->make(true);
   

2. Lazy Loading:

   return DataTables::of(User::query())
       ->lazyLoad(function($query) {
           // Apply filters dynamically
           if (request('search')) {
               $query->where('name', 'like', '%' . request('search') . '%');
           }
       })
       ->make(true);
   

3. Caching:

   return DataTables::of(Cache::remember('users_datatable_' . request()->getContent(), 60, function() {
       return User::query();
   }))
   ->make(true);
   

Gotchas and Tips

Pitfalls

1. CSRF Token Mismatch:

   • Issue: Frontend DataTables requests may fail with CSRF errors.
   • Fix: Exclude DataTables routes from CSRF verification in VerifyCsrfToken middleware:

     protected $except = [
         'users/datatable',
         // ... other DataTables routes
     ];
     

   • Alternative: Use meta option in DataTables:

     $.ajaxSetup({
         headers: {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
         }
     });
     

2. Column Name Mismatch:

   • Issue: Data not displaying due to column name mismatches between backend and frontend.
   • Fix: Explicitly define name in columns:

     columns: [
         { data: 'name', name: 'name' }, // Ensure 'name' matches backend
         { data: 'email', name: 'email' }
     ]
     

3. Pagination Conflicts:

   • Issue: Default pagination may conflict with DataTables pagination.
   • Fix: Disable Laravel’s pagination in the query:

     return DataTables::of(User::query()->simplePaginate(10))
         ->make(true);
     

     Or use ->paginate() with length parameter:

     $.fn.dataTable.ext.pager.numbers_length = 5; // Show 5 page buttons
     

4. Memory Leaks with Large Datasets:

   • Issue: Server-side processing may consume excessive memory for very