Implementación de DataTables en Laravel 5.4

DataTables

Qué es DataTables

DataTables como lo define su página oficial es un plugin de jQuery que te permite agregar controles de interacción avanzados a las tablas HTML. Proporciona una búsqueda rápida, paginación, clasificación y ordenamiento de las distintas columnas. Lo mejor es que podemos añadir todas estas funcionalidades en nuestras tablas con tan solo unas pocas líneas de código. DataTables además nos permite trabajar con AJAX para la búsqueda y obtención de datos.

En este tutorial vamos a realizar la implementación de este gran plugin DataTables en Laravel utilizando el paquete yajra/laravel-datatables.

Antes de comenzar hay que asegurarnos de contar con los requisitos:

  • PHP >= 5.6.4
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Mbstring PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension

Paso 1: Instalar laravel 5.4

Primero debemos realizar una instalación limpia y fresca de Laravel con el siguiente comando:

composer create-project –prefer-dist laravel/laravel blog “5.4.*”

Paso 2: Instalar paquete

Como segundo paso en nuestro proyecto blog vamos a instalar el paquete de yajra/laravel-datatables con el comando de composer:

composer require yajra/laravel-datatables-oracle:7.*

Después de instalar correctamente el paquete, abrir el archivo config / app.php y añadir el Service Provider.

‘providers’ => [
. . .
Yajra\Datatables\DatatablesServiceProvider::class,
],

También puede hacer público el archivo de configuración con el siguiente comando, el cual nos crea el archivo config/datatables.php:

php artisan vendor:publish –tag=datatables

Paso 3: Crear la tabla tasks

Procedemos a crear nuestra tabla con migraciones, utilizando el comando de laravel:

php artisan make:migration create_tasks_table

Este comando nos crea un archivo llamado …_create_tasks_table.php en el directorio database/migrations que contiene la estructura de nuestra tabla tasks le vamos agregar los siguientes campos: id incremental, name, category, state y timestamps:


use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateTasksTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create(‘tasks’, function (Blueprint $table) {
$table->increments(‘id’);
$table->string(‘name’);
$table->string(‘category’);
$table->string(‘state’);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop(‘tasks’);
}
}

Al finalizar la creación de la migración, tenemos que ejecutarla con el siguiente comando:

php artisan migrate

Paso 4: Crear ruta

En este paso necesitamos crear las rutas de las tablas de datos a la vista y otro para obtener los datos. Abrir el archivo de rutas web.php y añadir las siguientes rutas.

Route::get(‘/’, ‘TaskController@index’);
Route::get(‘/tasks’, ‘TaskController@getTasks’)->name(‘datatable.tasks’);

Paso 5: Crear controlador

Ahora debemos crear un nuevo controlador como TaskController en esta ruta app / HTTP / Controladores / TaskController.php . Este controlador se encargará de la solicitud de los datos y devolver la respuesta obtenida.

php artisan make:controller TaskController

namespace App\Http\Controllers;
use App\Task;
use Illuminate\Http\Request;
use Yajra\Datatables\Datatables;
/**
* Class TaskController
* @package App\Http\Controllers
*/
class TaskController extends Controller
{
/**
* @return mixed
*/
public function index()
{
return view(‘index’);
}
/**
* @return mixed
*/
public function getTasks()
{
$tasks = Task::select([‘id’,’name’,’category’,’state’]);
return Datatables::of($tasks)
->make(true);
}
}

Paso 6: Crear vista

El último paso, es crear nuestra vista index.blade.php (Resources / views / index.blade.php) para mostrar los datos, Básicamente es crear una tabla y el jquery de DataTable:
Importante: recordar cargar las librerías: Jquery, bootstrap y DataTable.
Resources / views / index.blade.php

Laravel DataTables

http://js/libs/jquery/jquery-2.1.4.min.js
http://js/plugin/datatables/jquery.dataTables.min.js
http://js/plugin/datatables/dataTables.bootstrap.min.js

<div class=“container”>
    <table id=“task” class=“table table-hover table-condensed”>
        <thead>
        <tr>
            <th>Id</th>
            <th>Task</th>
            <th>Category</th>
            <th>State</th>
        </tr>
        </thead>
    </table>
</div>
 

$(document).ready(function() {
oTable = $(‘#task’).DataTable({
“processing”: true,
“serverSide”: true,
“ajax”: “{{ route(‘datatable.tasks’) }}”,
“columns”: [
{data: ‘id’, name: ‘id’},
{data: ‘name’, name: ‘name’},
{data: ‘category’, name: ‘category’},
{data: ‘state’, name: ‘state’}
]
});
});

 

Finalmente ejecutar el comando serve para ver nuestro resultado final:

php artisan serve

y acceder en nuestro navegador:

http://127.0.0.1:8000/

Resultado

Es un tutorial básico pero espero que te sirva de ayuda y de pie a que explotes todas las funcionalidades que nos brinda DataTables.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s