Skip to content
Icon

WARNING You're browsing the documentation for an old version of LARAVEL-DATATABLES. Consider upgrading your project to laravel-datatables 11.0.

Creating a Laravel Full CRUD with DataTables Editor.

Before we begin, please be reminded that the Editor library that we are going to use here requires a paid license. See DataTables Editor for details.

Create a new laravel app

Using laravel installer, run the command below using terminal.

laravel new editor

Once installed, lets configure our application and use sqlite as our database by updating DB_CONNECTION=sqlite. We also need to remove the following lines as it is not needed for sqlite.

DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

Next, create our database and run the migration. We will then seed some users using tinker.

cd editor
touch database/database.sqlite
php artisan migrate
php artisan tinker
>>> factory(App\User::class, 20)->create();

Install DataTables Editor library.

In this step, we will only need to install yajra/laravel-datatables-editor.

composer require yajra/laravel-datatables-editor

Create Controllers, DataTables and Editor classes.

php artisan make:controller UsersController
php artisan datatables:make Users
php artisan datatables:editor Users

These commands will generate the following files:

  • app\Http\Controllers\UsersController.php
  • app\DataTables\UsersDataTable.php
  • app\DataTables\UsersDataTablesEditor.php

Setup Controller

We will only need index and store method for our controller. But before that, lets register our route first on routes\web.php

Route::resource('users', 'UsersController');

Will now add the methods on our controller.

<?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());
}
}

Setup DataTable

<?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();
}
}

Setup Editor

<?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;
}
}

Setup View

Lets create our users admin panel view at resources/views/users/index.blade.php.

<!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>

Register and Download your trial Editor library

You can download the library assets here once you successfully registered to DataTables. We would only need the JS and CSS so I suggest you only download those files. Once downloaded, copy the library to public/plugins/editor of your laravel public directory.

Run your application

Using valet, visit your site using http://editor.dev/users and see the full CRUD in action.

Gist

See this gist for the complete source code of added files.