Tell me how to add inline editing to the yajra datatable? Everything else seems to work for me. Creates, edits and deletes records correctly. I tried to do as shown below but it didn't work (code "try"). That is, it is not even possible to select the cell in which you need to make changes. As I understand it, something does not work from the side of js. Therefore, even below I brought a clean controller and a clean template, where everything seems to work.
"try" code
$(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{csrf_token()}}'
}
});
var editor = new $.fn.dataTable.Editor({
ajax: "/service/formats",
table: "#format-table",
display: "bootstrap",
fields: [
{label: "id:", name: "id"},
{label: "name:", name: "name"},
]
});
$('#format-table').on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this);
});
{{$dataTable->generateScripts()}}
})
Controller
<?php
namespace App\DataTables;
use App\Models\Format;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;
class FormatDataTable extends DataTable
{
/**
* Build DataTable class.
*
* @param mixed $query Results from query() method.
* @return \Yajra\DataTables\DataTableAbstract
*/
public function dataTable($query)
{
return datatables()
->eloquent($query)
->setRowId('id');
}
/**
* Get query source of dataTable.
*
* @param \App\Models\Format $model
* @return \Illuminate\Database\Eloquent\Builder
*/
public function query(Format $model)
{
return $model->newQuery();
}
/**
* Optional method if you want to use html builder.
*
* @return \Yajra\DataTables\Html\Builder
*/
public function html()
{
return $this->builder()
->setTableId('format-table')
->columns($this->getColumns())
->minifiedAjax()
->select()
->serverSide()
->dom('B<"top"i>rt<"bottom"flp><"clear">')
->orderBy(1, 'asc')
->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')
])
);
}
/**
* Get columns.
*
* @return array
*/
protected function getColumns()
{
return [
Column::checkbox(),
Column::make('id'),
Column::make('name'),
];
}
/**
* Get filename for export.
*
* @return string
*/
protected function filename()
{
return 'Format_' . date('YmdHis');
}
}
template
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Форматы документов</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Форматы документов</title>
{{-- bootstrap --}}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
{{-- jquery --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
{{-- datatables --}}
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap5.min.js"></script>
{{-- buttons--}}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.bootstrap5.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.bootstrap5.min.js"></script>
<script src="/vendor/datatables/buttons.server-side.js"></script>
{{-- select--}}
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.bootstrap.min.css">
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="{{asset('plugins/editor/js/dataTables.editor.js')}}"></script>
<script src="{{asset('plugins/editor/js/editor.bootstrap5.min.js')}}"></script>
</head>
<body>
<section style="padding-top: 60px;">
<div class="container">
{!! $dataTable->table(['id' => 'format-table']) !!}
</div>
</section>
<script>
{!! $dataTable->generateScripts() !!}
</script>
</body>
