Laravel :: DataTables

This post was published originally on hoclabs.com/2018/02/19/laravel-datatables for my old blog.

En esta publicación implementaremos el plugin DataTables a través de la librería laravel-datatables de yajra, la cuál pueden encontrar en el siguiente repositorio: https://github.com/yajra/laravel-datatables .

1. Tener un proyecto Laravel (v5.5 o superior) creado, una vez dentro deberás importar la siguiente librería mediante Composer

composer require yajra/laravel-datatables-oracle:"~8.0"

En el caso de estar usando una versión anterior a Laravel 5.5 debes registrar el proveedor en el archivo app/config.php agregando las siguientes líneas:

Yajra\Datatables\DatatablesServiceProvider::class,
'Datatables' => Yajra\Datatables\Facades\Datatables::class,

2. Crear la siguiente vista con el nombre de index.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel DataTables</title>
    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- DataTables CSS for Bootstrap -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
    <style>
        body {
            padding-top: 40px;
        }
    </style>
</head>
<body>
<div class="container">
    <table id="users-table" class="table table-bordered table-hover table-condensed">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Created At</th>
            <th>Updated At</th>
        </tr>
        </thead>
    </table>
</div>
<!-- jQuery -->
<script
        src="http://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>
<!-- DataTables Javascript -->
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<!-- DataTables JavaScript for Bootstrap -->
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- App scripts -->
<script>
    $(function () {
        $('#users-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{!! route('datatables.data') !!}',
            columns: [
                {data: 'id', name: 'id'},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'created_at', name: 'created_at'},
                {data: 'updated_at', name: 'updated_at'}
            ]
        });
    });
</script>
</body>
</html>

2.1: Explicando la instancia DataTable()

<script>
    $(function () {
        $('#users-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{!! route('datatables.data') !!}',
            columns: [
                {data: 'id', name: 'id'},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'created_at', name: 'created_at'},
                {data: 'updated_at', name: 'updated_at'}
            ]
        });
    });
</script>

Como pueden observar en el siguiente superior estamos inicializando la instancia DataTable sobre nuestra tabla con el identificador “#users-table“.

Processing: es un evento que se dispara cuando hacemos un envío para procesar información al servidor.

serverSide: de esta forma es como le decimos al servidor que se va a encargar de realizar el filtrado, la paginación, y el ordenamiento. Cabe mencionar que esta es la mejor forma de trabajar con grandes volúmenes de registros.

ajax: es la ruta a la que nuestra instancia enviaría toda la configuración que hemos realizado y desde donde esperamos recibir los datos para volver a poblar nuestra tabla.

columns: es un arreglo de objetos donde cada objeto debe contener el atributo data (aquí recibimos el nombre del parámetro) y el atributo name (nombre de la columna en la tabla).

3. Definiendo las rutas y vistas

Vista de nuestra tabla:

Route::get('/', function () {
    return view('index');
});

Ruta para la obtención de datos:

use App\User;
use Illuminate\Support\Facades\DB;
use Yajra\DataTables\Facades\DataTables;
Route::get('/data', function () {
    /* ELOQUENT */
    $users = User::all();
    /* QUERY BUILDER */
    $users = DB::table('users')->get();
    return Datatables::of($users)->make(true);
});

Como pueden observar en el código superior he usado Eloquent, pero también pueden obtener la información a través de Query Builder. Además necesitamos cuando menos definir el método of() y make() sobre el Facade Datatables para que este pueda retornar los datos en que la instancia en JS los espera.

of(): nos permite definir la fuente de datos

make(true): pasando el valor de true nos permite convertir la respuesta a un objeto Datatable

Documentación oficial de la librería yajra/datatables: https://yajrabox.com/docs/laravel-datatables/master

Todo lo realizado hasta ahora es la configuración básica para empezar a trabajar con Datatables en Laravel, por supuesto que la librería tiene muchas opciones de personalización, tanto en la instancia JS como en el Facade.

Si tienes alguna duda o sugerencia por favor escribela en la caja de comentarios!

No Comments Yet