Datatables con Laravel 6

Para sacarle partido a DataTables en Laravel, vamos a hacer una integración utilizando la librería original y un paquete especialmente creado por  Arjay Angeles (Yajra) que nos facilitará el manejo de la opción server-side de datatables.

Ya sabemos que DataTables es un plugin de jQuery para renderizar tablas de forma sencilla y con muchas funcionalidades. Por lo que, necesitaremos incluir jQuery en nuestro proyecto.

Instalación yajra/laravel-datatables

Para el uso de Datatables en Laravel, vamos a utilizar este paquete que nos facilitará mucho las cosas: jQuery DataTables API for Laravel 4|5|6

Lo instalamos vía composer

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

Toda la documentación la podemos obtener en https://yajrabox.com/docs/laravel-datatables/master/installation

Instalación DataTables

Instalaremos la librería de datatables utilizando NPM Node.JS

npm install --save datatables.net-dt

Para utilizarlo vamos a entrar a nuestro app.js e incluiremos

// DataTables
import dt from 'datatables.net-dt';

¿Listos para trabajar?

Vamos a utilizar nuestro modelo User para este ejemplo. En mi tabla tengo los datos que voy a mostrar a continuación, pero si quieres seguir el ejemplo con los datos que tienes en tu modelo, solamente tienes que cambiar las columnas de la tabla HTML y los datos del recurso.

Vamos a añadir en el documento a renderizar la estructura básica de HTML (views\users\index.blade.php)

<table id="users-table" class="table table-hover table-primary w-100">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Apellidos</th>
            <th>Sexo</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Necesitaremos generar una URL para obtener los datos del recurso (routes\web.php)

Route::get('users/list', ['as' => 'users.list', 'uses' => 'UserController@usersList']);

Para la llamada a recuperar datos, añadiremos la utilización de la librería en el controlador (app\Http\Controllers\UserController.php)

use Yajra\DataTables\Facades\DataTables;

En el mismo controlador, crearemos un método userList() que recuperará los datos con una consulta y utilizaremos la función datatables (PHP) para crear una respuesta de tipo JSON.


/**
 * Devuelve el listado en JSON de los usuarios
 *
 * @param User $user
 * @param Request $request
 * @return void
 */
public function usersList(User $user, Request $request){

    // Usuarios
    return datatables($user->get())->toJson();
}

Ahora volvemos a abrir resources\js\app.js y añadiremos la función datatables (JS) que nos renderizará los datos en la tabla. Para hacer la llamada, utilizamos una propiedad (columns) con las columnas correspondientes.

¡Mucho Ojo! Tienen que ser el mismo número de columnas que el “thead” de la tabla HTML.

$('#users-table').DataTable({
    processing: true,
    serverSide: true,
    language: {
        "url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
    },
    ajax: {
        url: "/users/list",
        dataSrc: "data",
        type: "GET"
    },
    columns: [
        { data: 'id' },
        { data: 'nombre' },
        { data: 'apellidos' },
        { data: 'sexo' },
        { data: 'email' }
    ],
});

Yo estoy usando VueJS para trabajar. Vamos a utilizar el hook mounted y dentro de ella la función vm.$nextTick que lo que hará es accionar el código una vez se haya renderizado la vista completa.

if ($('#users-index').length > 0) {
    const users_index = new Vue({
        el: '#users-index',
        data: {
            usersTable: null
        },
        mounted() {
            this.$nextTick(function() {
                // Código que se ejecutará solo después de
                // haber renderizado la vista completa

                this.getDataTableUsers()
            })
        },
        methods: {
            getDataTableUsers: function() {
                this.usersTable = $('#users-table').DataTable({
                    processing: true,
                    serverSide: true,
                    language: {
                        "url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
                    },
                    ajax: {
                        url: "/users/list",
                        dataSrc: "data",
                        type: "GET"
                    },
                    columns: [
                        { data: 'id' },
                        { data: 'nombre' },
                        { data: 'apellidos' },
                        { data: 'sexo' },
                        { data: 'email' }
                    ],
                });
            }
        }
    })
}

Si no estás utilizando VUE, puedes utilizar jQuery y accionar la renderización.

$(document).ready(function() {
    var table = $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        language: {
            "url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
        },
        ajax: {
            url: "/users/list",
            dataSrc: "data",
            type: "GET"
        },
        columns: [
            { data: 'id' },
            { data: 'nombre' },
            { data: 'apellidos' },
            { data: 'sexo' },
            { data: 'email' }
        ],
    });
});