Laravel-datatables: Column buttons not working as expected

[jeraldpunx]

Summary of problem or feature request

The Edit and Delete is working, but the Role Column buttons not working: Admin

This is my code:

// Controller
public function getUsers()
{
    $users = User::select(['id', 'name', 'email', 'phone', 'created_at']);

    return Datatables::of($users)
        ->editColumn('created_at', function ($user) {
            return $user->created_at->format('Y/m/d');
        })
        ->filterColumn('created_at', function ($query, $keyword) {
            $query->whereRaw("DATE_FORMAT(created_at,'%Y/%m/%d') like ?", ["%$keyword%"]);
        })
        ->addColumn('role', function ($user) {
            return '<a class="btn btn-primary" href="#">Admin</a>';
        })
        ->addColumn('action', function ($user) {
            return '<a href="'.route('admin.users.edit', $user->id).'" class="btn btn-xs btn-primary"><i class="fa fa-edit"></i> Edit</a>
            <a href="'.route('admin.users.destroy', $user->id).'" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> Delete</a>';
        })
        ->editColumn('id', 'ID: {{$id}}')
        ->make(true);
}

//View
@section('content')
<table id="users-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Member since</th>
            <th>Role</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
    $(function() {
        $('#users-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{!! route('admin.datatables.users') !!}',
            columns: [
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'email', name: 'email' },
                { data: 'phone', name: 'phone' },
                { data: 'created_at', name: 'created_at' },
                { data: 'role', name: 'role', orderable: false, searchable: false },
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ]
        });
    });
</script>
@endsection

datatable result

• Laravel Version 5.7.19

[jeraldpunx]

I copy the content of column action
yet different result

[jeraldpunx]

It return me like this, the action column got it correct, but the role column is not correctly displayed.

{
  "draw": 0,
  "recordsTotal": 25,
  "recordsFiltered": 25,
  "data": [
    {
      "id": "ID: 1",
      "name": "Superadmin",
      "email": "[email protected]",
      "phone": null,
      "created_at": "2018/12/29",
      "roles": [
        {
          "id": "1",
          "name": "super-admin",
          "guard_name": "web",
          "created_at": "2018-12-29 02:50:58",
          "updated_at": "2018-12-29 02:50:58",
          "pivot": {
            "model_id": "1",
            "role_id": "1",
            "model_type": "App\\User"
          }
        }
      ],
      "role": "<a href="http://ticket.test/admin/users/1/edit" class="btn btn-xs btn-primary"><i class="fa fa-edit"></i> Edit</a>\n            <a href="http://ticket.test/admin/users/1" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> Delete</a>",
      "action": "<a href=\"http://ticket.test/admin/users/1/edit\" class=\"btn btn-xs btn-primary\"><i class=\"fa fa-edit\"></i> Edit</a>\n            <a href=\"http://ticket.test/admin/users/1\" class=\"btn btn-xs btn-danger\"><i class=\"fa fa-trash\"></i> Delete</a>"
    },
    ...

[yajra]

You should specify the raw columns that has html content.

Use ->rawColumns(['role', 'action'])

See https://yajrabox.com/docs/laravel-datatables/master/raw-columns for ref.

[jeraldpunx]

The role column from left join is cannot sort and searchable in frontend datatables? cause it's from the left join used on ->with('roles'),

public function getUsers()
{
    $users = User::select(['id', 'name', 'email', 'phone', 'created_at'])
                ->where('id','<>',1)
                ->with('roles');

    return Datatables::of($users)
        ->editColumn('created_at', function ($user) {
            return $user->created_at->format('Y/m/d');
        })
        ->filterColumn('created_at', function ($query, $keyword) {
            $query->whereRaw("DATE_FORMAT(created_at,'%Y/%m/%d') like ?", ["%$keyword%"]);
        })
        ->addColumn('role', function ($user) {
            return ucfirst($user->roles->first()->name);
        })
        ->addColumn('action', function ($user) {
            return '<a href="'.route('admin.users.edit', $user->id).'" class="btn btn-xs btn-primary"><i class="fa fa-edit"></i> Edit</a>
            <a href="'.route('admin.users.destroy', $user->id).'" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> Delete</a>';
        })
        ->editColumn('id', 'ID: {{$id}}')
        ->rawColumns(['role', 'action'])
        ->make(true);
}