Skip to content
Icon

WARNING You're browsing the documentation for an old version of LARAVEL-DATATABLES. Consider upgrading your project to laravel-datatables 10.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.

Pre-requisites

This tutorial requires https://yajrabox.com/docs/laravel-datatables/master/quick-starter.

Install DataTables Editor assets.

yarn add datatables.net-editor datatables.net-editor-bs4 datatables.net-select-bs4

Editor License

Copy and rename your Editor.XX.zip to Editor.zip and move it to project folder.

Register postinstall script to package.json

"scripts": {
"postinstall": "node ./node_modules/datatables.net-editor/install.js ./Editor.zip",
"dev": "npm run development",
.....
},

Register editor script on resources/js/bootstrap.js

try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
 
require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
require('datatables.net-select-bs4');
require('datatables.net-editor-bs4');
} catch (e) {}

Add editor styles on resources/sass/app.scss.

@import "~datatables.net-select-bs4/css/select.bootstrap4.css";
@import "~datatables.net-editor-bs4/css/editor.bootstrap4.css";

Recompile assets.

yarn
yarn watch / dev / prod

Update UsersDataTable and register the Editor buttons.

Note: CREATE button is in conflict with buttons.server-side.js. You need to remove the create button or rename it to something else like add button.

DataTable.ext.buttons.add = {
className: 'buttons-add',
 
text: function (dt) {
return '<i class="fa fa-plus"></i> ' + dt.i18n('buttons.add', 'Create');
},
 
action: function (e, dt, button, config) {
window.location = window.location.href.replace(/\/+$/, "") + '/create';
}
};

UsersDataTable.php

Create a new editor instance and add some fields for name and email.

use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
 
...
/**
* Build DataTable class.
*
* @param mixed $query Results from query() method.
* @return \Yajra\DataTables\DataTableAbstract
*/
public function dataTable($query)
{
return datatables()
->eloquent($query)
->setRowId('id') // Set the RowID
...
}
 
public function html()
{
return $this->builder()
->setTableId('users-table')
->columns($this->getColumns())
->minifiedAjax()
->dom('Bfrtip')
->orderBy(1)
->buttons(
Button::make('create')->editor('editor'),
Button::make('edit')->editor('editor'),
Button::make('remove')->editor('editor'),
Button::make('export'),
Button::make('print'),
Button::make('reset'),
Button::make('reload')
)
->editor(
Editor::make()
->fields([
Fields\Text::make('name'),
Fields\Text::make('email'),
Fields\Password::make('password'),
])
);
}

Create Editor Class to handle CRUD actions.

php artisan datatables:editor Users

Register Editor Route

Edit routes/web.php and register the store user route.

Route::post('/users', 'UsersController@store')->name('users.store');

Update users controller

namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\DataTables\UsersDataTable;
use App\DataTables\UsersDataTableEditor;
 
class UsersController extends Controller
{
public function index(UsersDataTable $dataTable)
{
return $dataTable->render('users.index');
}
 
public function store(UsersDataTableEditor $editor)
{
return $editor->process(request());
}
}

See your editor in action.