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