Search code examples
jquerylaraveldatatableslaravel-5.7yajra-datatable

How to output a clickable delete button using laravel collectives in yajra datatables laravel 5.7


I wanted to output a clickable delete button on another column of the yajra datatable using the laravel collectives. The problem is that it outputs a raw html text {!! Form::open(["action" => ["UsersController@destroy",28], "method" => "POST", "class" => "pull-right"]) !!} {{ Form::hidden("_method", "DELETE") }} {{ Form::submit("Delete", ["class" => "btn btn-danger"]) }} {!! Form::close()!!}") in the view instead of a clickable delete button. I can output regular html tags but I want to use the laravel collectives. I am confused why it isn't working even if I already added rawColumns() function.

Here is my controller:

public function yajraDT()
{
    $users = User::all();
    return Datatables::of($users)
    ->addColumn('delete', function ($users) {
            return '{!! Form::open(["action" => ["UsersController@destroy",'.$users->id.'], "method" => "POST", "class" => "pull-right"]) !!}
            {{ Form::hidden("_method", "DELETE") }}
            {{ Form::submit("Delete", ["class" => "btn btn-danger"]) }}
            {!! Form::close()!!}")';
    })
    ->rawColumns(['delete'])
    ->make(true);
}

Here is my view:

<script>
     $(function() {
           $('#tableDT').DataTable({
           processing: true,
           serverSide: true,
           ajax: '{{ url('users/yajraDT') }}',
           columns: [
                    { data: 'id', name: 'id', 
                        @if(Auth::check() && Auth::user()->type == "Admin")
                            render:function(data, type, row)
                            {
                                return "<a href='/users/"+ row.id +"'>" + row.id + "</a>"
                            }
                        @endif},
                    { data: 'first_name', name: 'first_name' },
                    { data: 'last_name', name: 'last_name' },
                    { data: 'email', name: 'email' },
                    { data: 'gender', name: 'gender' },
                    {data: 'delete', name: 'delete'}
                 ]
        });
     });
</script>

Solution

  • This is the way I do it:

    // in the controller
    
    return Datatables::of($users)
        ->addColumn('delete', function ( $user ) {
            return view('user.delete', compact('user'))->render();
        })
        ->escapeColumns([])
        ->make();
    
    

    Then your delete.blade.php

    {!! Form::open(["action" => ["UsersController@destroy", $user->id], "method" => "POST", "class" => "pull-right"]) !!}
        {{ Form::hidden("_method", "DELETE") }}
        {{ Form::submit("Delete", ["class" => "btn btn-danger"]) }}
    {!! Form::close()!!}
    

    This way you don't have hard-coded HTML in your controller, and you can render the html output before displaying.

    Another suggestion is to move your Admin check from the JS code into your controller, you can use the editColumn method on the Datatable.