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.
Si aún no conoces el plugin DataTables.js te recomiendo revisar las siguientes entradas en este mismo blog:

 

Paso #1: Tener un proyecto Laravel (v5.5) 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,
Paso #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).
Paso #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!

6 comments. Leave new

Que lasa cuando agregamos un boton, como lanzamos el evento con parametros usando un form o a href ?

/**
Vamos a suponer que tu Datatable recibe un arreglo con los siguientes parámetros:
Nombre, Email, Enlace
*/
{
data: ‘nombre’,
name: ‘nombre’
}, {
data: ’email’,
name: ’email’
}, {
data: ‘enlace’,
render: (data, type, row, meta) => {
let elem = ”;
console.log(row); //Te permite obtener todos los valores de la fila (nombre, email, enlace)
elem = <a href="${row.enlace}" class="btn btn-default">Enlace</a>;
return elem;
}
},
/**
Y así es como en tu tercera columna en lugar de obtener el texto con el enlace
lo que estarías mostrando sería un enlace con estilos de botón que te redirecciona
al enlace retornado desde el backend.
*/

Tengo una duda en el codigo en la parte de llamar la ruta

ajax: ‘{!! route(‘datatables.data’) !!}’,

a que se debe ese ‘datatables’ en la ruta, no seria solo data

ajax: ‘{!! route(‘data’) !!}’,

Así nombre a mi ruta desde el archivo web, recuerda que uso Laravel y tienes la posibilidad de especificar un nombre en particular a cada ruta. Igual puedes usar ajax: ‘/mi-datatable’

Buena tarde otra duda me genera, como hago para tener en un td dos datos del array? concatenar por ej el nombre y apellido en uno solo

Disculpa que haya tardado tanto, apenas vi los comentarios. Para combinar datos en una celda debes usar la función “render()” dentro de la configuración de la columna que deseas modificar. Ejemplo:

{
data: ‘nombre’,
name: ‘nombre’,
render: (data, type, row) => {
return ${row.nombre} ${row.apellido};
},
}

Donde el primer parámetro de la función que debe recibir render es data (contiene el valor especificado en la columna)
El segundo parámetro es type
El tercer parámetro es row (recibes todos los valores del registro actual en esta variable) de manera que puedes acceder a ellos desde esta columna

Si pones atención bien pude haber definido:
return ${data} ${row.apellido}; (solo para esa columna en particular)

Espero haberme dado a entender, sino sígueme posteando tus dudas

Leave a Reply