$.fn.dataTable.Editor is not a constructor

[vincent-treco]

Hello, I try to use editor datatable trial fot my work. I follow this tuto but I can't get the editor buttons to work. I got this error when i add the editor function in the html function on my ClientsDataTable : $.fn.dataTable.Editor is not a constructor

See my code

index.blade.twig :

@extends('dashboard.base')
@section('css')
    <link rel="stylesheet" href="{{ asset('css/editor.bootstrap4.css') }}">
    <link rel="stylesheet" href="{{ asset('css/buttons.bootstrap4.css') }}">
    <link rel="stylesheet" href="{{ asset('css/select.bootstrap4.css') }}">
    <link rel="stylesheet" href="{{ asset('css/editor.dataTables.css') }}">
@endsection
@section('content')
    {{ $dataTable->table() }}
@endsection

@section('javascript')
    <script src="{{ asset('js/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('js/dataTables.select.js') }}"></script>
    <script src="{{ asset('js/select.bootstrap4.js') }}"></script>
    <script src="{{ mix('js/dataTables.editor.js') }}"></script>
    <script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.buttons.js') }}"></script>
    <script src="{{ asset('js/buttons.bootstrap4.js') }}"></script>
    <script src="{{ asset('/vendor/datatables/buttons.server-side.js') }}"></script>
    {!! $dataTable->scripts() !!}
@endsection

ClientsDatatable :

<?php

namespace App\DataTables;

use App\Models\Client;
use DataTables\Editor\Field;
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 ClientsDataTable extends DataTable
{
    /**
     * Build DataTable class.
     *
     * @param mixed $query Results from query() method.
     * @return \Yajra\DataTables\DataTableAbstract
     */
    public function dataTable($query)
    {
        return datatables()
            ->eloquent($query)
            ->addColumn('action', 'clients.action')
            ->setRowId('id');
    }

    /**
     * Get query source of dataTable.
     *
     * @param \App\Models\Client $model
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function query(Client $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('clients-table')
            ->columns($this->getColumns())
            ->minifiedAjax()
            ->dom('Bfrtip')
            ->select(true)
            ->orderBy(0, 'ASC')
            ->rowId('id')
            ->serverSide(true)
            ->buttons(
                Button::make('add')->editor('editor')->text('Ajouter'),
                Button::make('edit')->editor('editor')->text('Modifier'),
                Button::make('remove')->editor('editor')->text('Supprimer'),
                Button::make('export')->text('Exporter'),
                Button::make('print')->text('Imprimer'),
//                Button::make('reset'),
                Button::make('reload')->text('Actualiser')
            )
            ->editor(
                Editor::make()
                    ->fields([
                        Fields\Text::make('cli_nom1')->label('Nom client 1'),
                        Fields\Text::make('cli_nom2'),
                        Fields\Text::make('cli_prenom1')->label('Prenom client 1'),
                        Fields\Text::make('cli_prenom2')
                    ])
            );
    }

    /**
     * Get columns.
     *
     * @return array
     */
    protected function getColumns()
    {
        return [
            Column::make('id')->name('id'),
            Column::make('cli_nom1'),
//            Column::make('cli_nom2'),
            Column::make('cli_prenom1'),
//            Column::make('cli_prenom2')
        ];
    }

    /**
     * Get filename for export.
     *
     * @return string
     */
    protected function filename()
    {
        return 'Clients_' . date('YmdHis');
    }
}

ClientDataTableEditor.php :

<?php

namespace App\DataTables;

use App\Models\Client;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Validation\Rule;
use Yajra\DataTables\DataTablesEditor;

class ClientDataTableEditor extends DataTablesEditor
{
    protected $model = Client::class;

    /**
     * Get create action validation rules.
     *
     * @return array
     */
    public function createRules()
    {
        return [
            'cli_nom1' => 'required:' . $this->resolveModel()->getTable(),
            'cli_prenom1'  => 'required',
        ];
    }

    /**
     * Get edit action validation rules.
     *
     * @param Model $model
     * @return array
     */
    public function editRules(Model $model)
    {
        return [
            'cli_nom1' => 'required',
            'cli_prenom1'  => 'required',
        ];
    }

    /**
     * Get remove action validation rules.
     *
     * @param Model $model
     * @return array
     */
    public function removeRules(Model $model)
    {
        return [];
    }
}

I installed all dependencies buth this code doesn't want to work !
If someone can help me, thank you

• Operating System : Ubuntu 20.04
• PHP Version : 7.4
• Laravel Version : 8.0
• Laravel-Datatables Version 9.17.1

[yajra]

It seems like your editor scripts did not load properly. Does this exists?

<script src="{{ mix('js/dataTables.editor.js') }}"></script>

Also, I think you should use asset since it's not compiled by mix.

<script src="{{ asset('js/dataTables.editor.js') }}"></script>

[vincent-treco]

Ohhhh, thanks !

mix.js('resources/js/dataTables.editor.js', 'public/js'); // datatable
i mixed my files with the js function so the file was compiled

mix.copy('resources/js/dataTables.editor.js', 'public/js'); // datatable
with a copy i do not have the error anymore

Without your response i would never have thought of that

[vincent-treco]

But now, i have a second issue. The datatable is ok and the buttons too. But when i try to update a line, it stays the same

[schonhoff]

Hello,

if you try to update a line, is the line updated in the database and only the new value isn't updated in the view or is the value not updated?

[MPJHorner]

Wow! Thank you - after following documentation here https://yajrabox.com/docs/laravel-datatables/master/quick-starter I could not get it to work.
Using COPY in mix managed to get it working!
Thank you!

[github-actions]

This issue is stale because it has been open for 30 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale.