duaggable sorting not work because of newData,oldData is undefined

asd2x

in controller

    public function reorder(Request $request)
    {
        // dd(x);
        foreach($request->input('rows', []) as $row)
        {
            Genre::find($row['id'])->update([
                'position' => $row['position']
            ]);
        }

        return response()->noContent();
    }
    public function serverSide()
    {
        $genres = Genre::query();

        return datatables($genres)

            ->addColumn('name', function ($each) {

                return '<p class="mb-0">' . Str::limit($each->name, 80) . ' </p>';
            })

            ->addColumn('created_at', function ($each) {

                return Carbon::parse($each->created_at)->format('d/m/Y');
            })

            ->addColumn('action', function ($each) {

                $edit_icon = '<a href="' . route('genres.edit', $each->id) . '" class="btn btn-sm btn-outline-success"><i class="mdi mdi-square-edit-outline btn_icon"></i></a>';
                $delete_icon = '<a href="#" class="btn btn-sm btn-danger delete_btn" data-id="' . $each->id . '"><i class="mdi mdi-trash-can-outline btn_icon"></i></a>';

                return '<div class="d-flex align-items-center justify-content-center flex-wrap gap-2">' . $edit_icon . $delete_icon . '</div>';
            })

            ->rawColumns(['name', 'created_at', 'action'])
            ->toJson();
    }
route
    Route::get('/genres/datatable/ssd', [GenreController::class, 'serverSide'])->name('genres.ssd');
    Route::post('/genres/datatable/reorder', [GenreController::class, 'reorder'])->name('genres.reorder');

in blade    
         // Global Setup For DataTable
            let table = $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                retrieve: true,
                responsive: true,
                aaSorting:true,
                ajax: "{{ route('genres.ssd') }}",
                //Below code is extension 
                language: [{
                    "processing": "<img src='{{asset('logo/flim-loading.gif') }}' width='50px'/><p></p>",
                    "paginate": {
                        "previous": '<i class="mdi mdi-chevron-triple-left"></i>',
                        "next": '<i class="mdi mdi-chevron-triple-right"></i>',
                    },
                    searchPlaceholder: "Find Genres Name"
                }],
                
                columns: [{
                        data: 'id',name: 'id',class: 'text-center cus__table_row'
                    },{
                        data: 'position',name: 'position',class: 'text-center cus__table_row'
                    },{
                        data: 'name',name: 'name',class: 'text-center cus__table_row'
                    },{
                        data: 'created_at',name: 'created_at',class: 'text-center cus__table_row'
                    },{
                        data: 'action',name: 'action',class: 'text-center'
                    },
                ],

                columnDefs: [{
                        targets: 'hidden',visible: false,searchable: false,
                    },{
                        targets: 'no-sort',sortable: false,
                    },{
                        targets: 'no-search',searchable: false,
                    },{
                        targets: [0],class: "control"
                    },
                ],
                
                order: [[1, 'desc']],
                rowReorder: [
                    true,
                    {
                        selector: 'tr td:not(:first-of-type,:last-of-type)',dataSrc: 'data.position'
                    },
                ]
            });
            // let datatable = $('#datatable').DataTable(table);
            table.on('row-reorder', function(e, details,node) {
                if (details.length) {
                    let rows = [];
                    details.forEach(element => {
                        rows.push({
                            id: table.row(element.node).data().id,
                            position:element.newPosition
                        });
                        // console.log(data)
                        console.log(e)
                        console.log(details)
                        console.log(node)
                    });
                    $.ajax({
                        method: 'POST',
                        url: "{{ route('genres.reorder') }}",
                        data: {
                            _token: '{{ csrf_token() }}',
                            rows: rows
                        }
                    }).done(function() {
                        table.ajax.reload()
                    });
                }
            });

in model

   protected static function boot()
    {
        parent::boot();
        Genre::creating(function ($model) {
            $model->position = Genre::max('position') + 1;
        });
    }

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin