First datatable editor configuration

cmplus

I just bought the editor and I'm having trouble. I'm trying to figure out how to go about using it and configuring it for laravel. Currently I modified the code following some guide and I see the table working, it loads the values from the datatbase, I just don't understand how to configure the new, edit, delete buttons, the searchPanes panel is always empty. I get this error message

npm i datatables.net-editor datatables.net-editor-bs5
npm ERROR! code ETARGET
npm ERROR! notarget No matching version found for datatables.net-editor@^2.2.0.
npm ERROR! notarget In most cases you or one of your dependencies are requesting
npm ERROR! notarget a package version that doesn't exist.

npm ERROR! A complete log of this run can be found in: /home/dh_waa34h/.npm/_logs/2023-07-20T12_06_37_641Z-debug-0.log.

I put this in the package.json file

"postinstall": "node node_modules/datatables.net-editor/install.js ./Editor.zip"

in the composer.json file

"datatables.net/editor-php": "2.*"

@push('scripts')


<

script type="text/javascript">
        const editor = new DataTable.Editor({
            ajax: '{{ route('tickets.index') }}',
            fields: [
                {label: 'id', name: 'id'},
                {label: 'stato', name: 'stato'},
                {label: 'orario', name: 'orario'},
                {label: 'priorita', name: 'priorita'},
                {label: 'descrizione', name: 'descrizione'},
                {label: 'categoria', name: 'categoria'},
            ],
            table: 'table.display'
        });
        new DataTable('table.display', {
            language: {
                url: "//cdn.datatables.net/plug-ins/1.13.5/i18n/it-IT.json"
            },
            ajax:'{{ route('tickets.index') }}',
            dataType:"json",

            buttons: [
                { extend: 'create', editor },
                { extend: 'edit', editor },
                { extend: 'remove', editor },
                { extend: 'copyHtml5', text: 'Copia', titleAttr: 'Copia', className: 'btn'}, 
                { extend: 'csvHtml5', text: 'CSV', titleAttr: 'CSV', className: 'btn'}, 
                { extend: 'excelHtml5',text: 'Excel',titleAttr: 'Excel',className: 'btn'}, 
                { extend: 'pdfHtml5',orientation: 'landscape',pageSize: 'LEGAL',text: 'PDF',titleAttr: 'PDF', className: 'btn'}, 
                { extend: 'print',text: 'Stampa',titleAttr: 'Stampa',className: 'btn'},
                { extend: "colvis", postfixButtons: ["colvisRestore"]},
            ],
            columns: [
                {data: 'id', name: 'id'},
                {data: 'stato', name: 'stato'},
                {data: 'orario', name: 'orario'},
                {data: 'priorita', name: 'priorita'},
                {data: 'descrizione', name: 'descrizione'},
                {data: 'categoria', name: 'categoria'},
            ],
            dom: '<PBfrt<t>lip>',
            deferRender: true,
            responsive: true,
            lengthChange: true,
            orderCellsTop: true,
            fixedHeader: true,
            select: true,
            processing: true,
            serverSide: true,
            stateSave: true,
            searchPanes:{
                cascadePanes: true,
                initCollapsed: true,
                show: true,
                dtOpts:{
                    dom: 'tp',
                    paging: 'true',
                    pagingType: 'simple',
                    searching: true
                }
            },
            columnDefs: [
                {
                    target: 2,
                    render: DataTable.render.date(),
                    target: 5,
                    render: DataTable.render.ellipsis( 17, true ),
                    searchPanes: {
                        show: true
                    },
                    targets: '_all',
                }
            ],
        });


controller

    public function index(Request $request)
    {
        if ($request->ajax()) {
            return Datatables()::of(Ticket::query())
                ->addIndexColumn()
                ->addColumn('action', function($row){
                    $btn  = '<a href="'.route('tickets.show', $row->id).'"><i class="ti-eye"></i></a>
                            <a href="'.route('tickets.edit', $row->id).'"><i class="ti-pencil"></i></a>
                            <a href="'.route('tickets.create', $row->id).'"><i class="icon-plus"></i></a>';
                    return $btn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }
        return view('tickets.index');
    }

allan

Sorry about that. The publish for the latest Editor holding packages didn't happen. datatables.net-editor 2.2.2 is on NPM now - although it is just the same as the previous 2.1.0 - its a simple install wrapper script.

If you didn't want to do the install that way, you can use our own npm registry as described here.

Allan