Skip to content

Instantly share code, notes, and snippets.

@yajra
Last active July 5, 2023 19:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save yajra/38ee8d2521fa419309dfabcb667d9c2a to your computer and use it in GitHub Desktop.
Save yajra/38ee8d2521fa419309dfabcb667d9c2a to your computer and use it in GitHub Desktop.
Laravel DataTables Editor Snippets
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:2JTqUn+p24WXtpVdoIyoK3cIaMOMpeuKvE7vEIlShlg=
APP_DEBUG=true
APP_LOG_LEVEL=debug
APP_URL=http://localhost
DB_CONNECTION=sqlite
BROADCAST_DRIVER=log
CACHE_DRIVER=file
SESSION_DRIVER=file
SESSION_LIFETIME=120
QUEUE_DRIVER=sync
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
<!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>
<?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());
}
}
<?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();
}
}
<?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;
}
}
@chriscalip
Copy link

If your coming from:
https://yajrabox.com/docs/laravel-datatables/master/editor-tutorial
index.blade.php is resources/views/users/index.blade.php

@yajra
Copy link
Author

yajra commented Dec 24, 2017

@chriscalip, thanks for pointing that out, I cannot name the file in full path as it is not allowed.

@mohamed0000
Copy link

err
when i make all above nothing done and this message appear in console, how i can solve this problem

@hamaswa
Copy link

hamaswa commented Apr 6, 2019

menu:136 Uncaught ReferenceError: editor is not defined
at menu:136
at menu:136
Got this error after additor plugin.

@IykeOkey
Copy link

IykeOkey commented Jul 5, 2023

It is not displaying data from mysql table when placed inside startbootstrap sb-admin dashboard theme. But it works fine when alone. Please what could be the problem? Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment