Requisitos:
Instalamos Laravel en el folder en donde estamos
composer create-project --prefer-dist laravel/laravel . "5.6.*"
Instalamos Laravel Datatables – Editor
composer require yajra/laravel-datatables-oracle:"~8.0" //v1.6 composer require yajra/laravel-datatables-editor
Usar DataTables Editor
//crear contorlador de usuarios php artisan make:controller UsersController //crear clase DataTable para usuarios php artisan datatables:make Users //crear clase DataTable Editor para usuarios php artisan datatables:editor Users
Configuramos la ruta
Route::resource('users', 'UsersController');
Editamos nuestro controlador de usuario
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\DataTables\UsersDataTable;
use App\DataTables\UsersDataTablesEditor;
class UsersController extends Controller
{
public function index(UsersDataTable $dataTable)
{
return $dataTable->render('users.index');
}
public function store(UsersDataTablesEditor $editor)
{
return $editor->process(request());
}
}
Editamos nuestra clase DataTable para usuarios
<?php
namespace App\DataTables;
use App\User;
use Yajra\DataTables\Services\DataTable;
class UsersDataTable extends DataTable
{
/**
* Build DataTable class.
*
* @param mixed $query Results from query() method.
* @return \Yajra\DataTables\DataTableAbstract
*/
public function dataTable($query)
{
return datatables($query)->setRowId('id')->addColumn('password', '');
}
/**
* Get query source of dataTable.
*
* @param \App\User $model
* @return \Illuminate\Database\Eloquent\Builder
*/
public function query(User $model)
{
return $model->newQuery()->select('id', 'name', 'email');
}
/**
* Optional method if you want to use html builder.
*
* @return \Yajra\DataTables\Html\Builder
*/
public function html()
{
return $this->builder()
->columns($this->getColumns())
->minifiedAjax()
->parameters([
'dom' => 'Bfrtip',
'order' => [1, 'asc'],
'select' => [
'style' => 'os',
'selector' => 'td:first-child',
],
'buttons' => [
['extend' => 'create', 'editor' => 'editor'],
['extend' => 'edit', 'editor' => 'editor'],
['extend' => 'remove', 'editor' => 'editor'],
]
]);
}
/**
* Get columns.
*
* @return array
*/
protected function getColumns()
{
return [
[
'data' => null,
'defaultContent' => '',
'className' => 'select-checkbox',
'title' => '',
'orderable' => false,
'searchable' => false
],
'id',
'name',
'email',
];
}
/**
* Get filename for export.
*
* @return string
*/
protected function filename()
{
return 'users_' . time();
}
}
Editamos nuestra clase DataTable Editor para usuarios
<?php
namespace App\DataTables;
use App\User;
use Illuminate\Validation\Rule;
use Yajra\DataTables\DataTablesEditor;
use Illuminate\Database\Eloquent\Model;
class UsersDataTablesEditor extends DataTablesEditor
{
protected $model = User::class;
/**
* Get create action validation rules.
*
* @return array
*/
public function createRules()
{
return [
'email' => 'required|email|unique:users',
'name' => 'required',
];
}
/**
* Get edit action validation rules.
*
* @param Model $model
* @return array
*/
public function editRules(Model $model)
{
return [
'email' => 'sometimes|required|email|' . Rule::unique($model->getTable())->ignore($model->getKey()),
'name' => 'sometimes|required',
];
}
/**
* Get remove action validation rules.
*
* @param Model $model
* @return array
*/
public function removeRules(Model $model)
{
return [];
}
/**
* Pre-create action event hook.
*
* @param Model $model
* @return array
*/
public function creating(Model $model, array $data)
{
$data['password'] = bcrypt($data['password']);
return $data;
}
/**
* Pre-update action event hook.
*
* @param Model $model
* @return array
*/
public function updating(Model $model, array $data)
{
if (empty($data['password'])) {
unset($data['password']);
} else {
$data['password'] = bcrypt($data['password']);
}
return $data;
}
}
Agregamos la vista de Usuarios
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<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 Editor</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.0/css/buttons.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.4/css/select.bootstrap.min.css">
<link rel="stylesheet" href="/plugins/editor/css/dataTables.editor.css">
<link rel="stylesheet" href="/plugins/editor/css/editor.bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
<script src="{{asset('plugins/editor/js/dataTables.editor.js')}}"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.0/js/buttons.bootstrap.min.js"></script>
<script src="{{asset('plugins/editor/js/editor.bootstrap.min.js')}}"></script>
</head>
<body>
<div class="container">
{{$dataTable->table(['id' => 'users'])}}
</div>
<script>
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{csrf_token()}}'
}
});
var editor = new $.fn.dataTable.Editor({
ajax: "/users",
table: "#users",
display: "bootstrap",
fields: [
{label: "Name:", name: "name"},
{label: "Email:", name: "email"},
{label: "Password:", name: "password", type: "password"}
]
});
$('#users').on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this);
});
{{$dataTable->generateScripts()}}
})
</script>
</body>
</html>
Levantamos nuestro servidor
php artisan serve
