how make a AJAX request to controller

I am not familiar with "datatables" as I create my own tables. But what ajax do you refer to? Does datatables have it built in or do you mean using ajax from another JS library?

If datatables supplies all of this, their documentation should have some examples to use.

You don't need to use ajax, you already have this code;

                <form method="POST" action="' . route("dashboard.roles.destroy", $role['id']) . '" accept-charset="UTF-8" style="display:inline">
                ' . method_field('DELETE') . '  
                ' . csrf_field() . '
                <button type="submit" class="trash"><i class="bi bi-trash2"></i> </button>
                </form>

i m actually still have the same problem

this is my route

Route::prefix('dashboard')->middleware(['auth', 'verified'])->name('dashboard.')
    ->group(function () {
        Route::resource('roles', RoleController::class)->name('*', 'roles');
        Route::delete('roles/deletePermission', [RoleController::class, 'deletePermission'])->name('roles.deletePermission');
    });

and this is RolesDataTable

t 

<?php

namespace App\DataTables;

use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;
use Illuminate\Database\Eloquent\Builder as QueryBuilder;
use Yajra\DataTables\EloquentDataTable;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
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 RolesDataTable extends DataTable
{
    /**
     * Build the DataTable class.
     *
     * @param QueryBuilder $query Results from query() method.
     */
    public function dataTable(QueryBuilder $query): EloquentDataTable
    {
        return (new EloquentDataTable($query))

            // Inside the 'Permissions' column definition
            ->addColumn('Permissions', function ($role) {
                $permissions = '';
                foreach ($role->permissions as $permission) {
                    $permissions .= '<p class="badge permission-badge" data-role-id="' . $role->id . '" data-permission-id="' . $permission->id . '" onclick="deletePermission(this)">' . $permission->name . '</p>';
                }
                $permissions = trim($permissions);
                return '<div class="flex__roles">' . $permissions . '</div>';
            })



            ->addColumn('action', function ($role) {
                return '
                <a href="' . route("dashboard.roles.show", $role['id']) . '" class="eye"><i class="bi bi-eye "></i> </a>
                <a href="' . route("dashboard.roles.edit", $role['id']) . '" class="edit"><i class="bi bi-pencil-square"></i> </a>
                
                <form method="POST" action="' . route("dashboard.roles.destroy", $role['id']) . '" accept-charset="UTF-8" style="display:inline">
                ' . method_field('DELETE') . '  
                ' . csrf_field() . '
                <button type="submit" class="trash"><i class="bi bi-trash2"></i> </button>
                </form>

                ';
            })


            ->rawColumns(['Permissions', 'action'])
            ->setRowId('id');
    }


    /**
     * Get the query source of dataTable.
     */
    public function query(Role $model): QueryBuilder
    {


        return $model->newQuery();
    }

    /**
     * Optional method if you want to use the html builder.
     */
    public function html(): HtmlBuilder
    {
        return $this->builder()
            ->setTableId('roles-table')
            ->columns($this->getColumns())
            ->minifiedAjax()
            //->dom('Bfrtip')
            ->orderBy(1)
            ->selectStyleSingle()
            ->buttons([
                Button::make('excel'),
                Button::make('csv'),
                Button::make('pdf'),
                Button::make('print'),
                Button::make('reset'),
                Button::make('reload')
            ]);
    }

    /**
     * Get the dataTable columns definition.
     */
    public function getColumns(): array
    {
        return [


            Column::make('name')->addClass('text-center')->width(100)->title('Name'),

            Column::computed('Permissions')
                ->exportable(false)
                ->printable(false)
                ->addClass('text-center')
                ->title('Permissions')
                ->footer('Permissions'),


            Column::computed('action')
                ->exportable(false)
                ->printable(false)
                ->width(120)
                ->addClass('text-center')
                ->title('Action')

                ->footer('Action')

        ];
    }

    /**
     * Get the filename for export.
     */
    protected function filename(): string
    {
        return 'Roles_' . date('YmdHis');
    }
}

for evry permissions

in this line

    ->addColumn('Permissions', function ($role) {
                $permissions = '';
                foreach ($role->permissions as $permission) {
                    $permissions .= '<p class="badge permission-badge" data-role-id="' . $role->id . '" data-permission-id="' . $permission->id . '" onclick="deletePermission(this)">' . $permission->name . '</p>';
                }
                $permissions = trim($permissions);
                return '<div class="flex__roles">' . $permissions . '</div>';
            })

i wanna send req to controller how to make it

this is my controller

public function deletePermission(Request $request): JsonResponse
    {

        try {
            $roleId = $request->input('roleId');
            $permissionId = $request->input('permissionId');

            // Find the role
            $role = Role::findOrFail($roleId);

            // Revoke (delete) the permission from the role
            $role->revokePermissionTo($permissionId);

            return response()->json(['message' => 'Permission deleted successfully']);
        } catch (\Exception $e) {
            return response()->json(['error' => 'Error deleting permission'], 500);
        }
    }

i m use this script but the error in connction betw controller

 <script type="text/javascript">
        async function deletePermission(element) {
            var roleId = element.getAttribute('data-role-id');
            var permissionId = element.getAttribute('data-permission-id');

            try {
                const response = await fetch(`{{ route('dashboard.roles.deletePermission') }}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    body: JSON.stringify({
                        roleId: roleId,
                        permissionId: permissionId
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status} , Message: ${response.statusText}`);

                }

                const data = await response.json();
                // Do something with the result
                alert('Deleting Permission');
            } catch (error) {
                // Handle errors
                console.error('Error:', error);
                alert('Error Deleting Permission');
            }
        }
    </script>

Their documentation should have examples.