Guía completa para dominar Yajra DataTables en Laravel

La presentación de datos en forma de tablas es uno de los elementos más comunes y esenciales en cualquier aplicación web. Sin embargo, cuando los datos crecen en cantidad, mantener el rendimiento y la experiencia del usuario puede ser un desafío.

En este artículo aprenderás cómo aprovechar Yajra DataTables, una potente extensión de Laravel que integra de manera sencilla el popular plugin jQuery DataTables con Eloquent ORM y el sistema de rutas de Laravel.

1. ¿Qué es Yajra DataTables?

Yajra DataTables es un paquete para Laravel que simplifica la creación de tablas dinámicas con soporte para:

Paginación automática
Ordenamiento
Búsqueda global y por columnas
Integración directa con consultas Eloquent, Query Builder o colecciones

Su principal ventaja es que realiza todo el procesamiento del lado del servidor, lo que permite manejar grandes volúmenes de datos sin afectar el rendimiento del navegador.

2. Instalación del paquete

Agrega el paquete mediante Composer:

composer require yajra/laravel-datatables-oracle

Publica los archivos de configuración y ejecuta las migraciones si es necesario:

php artisan vendor:publish --tag=datatables

Y registra el Service Provider (en Laravel 11 o inferior):

Yajra\DataTables\DataTablesServiceProvider::class,

3. Creación del controlador y ruta

Crea un controlador para manejar las peticiones AJAX:

php artisan make:controller UserController

Dentro del controlador, agrega un método para devolver los datos procesados:

use App\Models\User;
use Yajra\DataTables\Facades\DataTables;

public function index()
{
    if (request()->ajax()) {
        $data = User::select(['id', 'name', 'email', 'created_at']);
        return DataTables::of($data)
            ->addIndexColumn()
            ->make(true);
    }

    return view('users.index');
}

Define la ruta correspondiente en

web.php

Route::get('/users', [UserController::class, 'index'])->name('users.index');

4. Configuración del frontend

En la vista

users/index.blade.php

, incluye las librerías necesarias:

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

Y configura la tabla para cargar los datos mediante AJAX:

$('#users-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: '{{ route('users.index') }}',
    columns: [
        { data: 'id', name: 'id' },
        { data: 'name', name: 'name' },
        { data: 'email', name: 'email' },
        { data: 'created_at', name: 'created_at' },
    ]
});

5. Personalización y filtros

Yajra DataTables permite agregar columnas personalizadas, botones de acción o filtros dinámicos.
Por ejemplo, para añadir botones de edición y eliminación:

->addColumn('action', function($row){
    return '<a href="/users/'.$row->id.'/edit" class="btn btn-sm btn-primary">Editar</a>';
})
->rawColumns(['action'])

6. Consejos de rendimiento

Utiliza
```
select()
```
para limitar las columnas consultadas.
Usa
```
addIndexColumn()
```
para manejar índices sin afectar las consultas.
Implementa
```
cache()
```
en consultas pesadas.
Considera usar
```
Chunking
```
si trabajas con más de 10,000 registros.

Conclusión

Yajra DataTables ofrece una forma elegante y eficiente de manejar datos en Laravel, combinando el poder del backend con una experiencia de usuario fluida.
Su integración directa con Eloquent y su soporte para procesamiento del lado del servidor lo convierten en una herramienta esencial para cualquier desarrollador que busque optimizar interfaces de administración o reportes.

Guía completa para dominar Yajra DataTables en Laravel