Laravel Yajra Datatable plugin 404 error in console

I am trying to use Laravel's Yajra Plugin for datatables i tryed with single modle (user model) it working fine but when i tryed eloquent relationships i get 404 erorrs here is my code.

Table View

@extends('layouts.app')

@section('content')

<table class="table table-bordered" id="users-table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Username</th>
            <th>User Role</th>
            <th>Phone</th> /* Where i remove this column datatable works file */
        </tr>
    </thead>
</table>

<script>

    $(function() {
        $('#users-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{!! route('user_datatable_data') !!}',
            columns: [
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'email', name: 'email' },
                { data: 'username', name: 'username' },
                { data: 'role.role_name', name: 'role.role_name' },
                { data: 'phone', name: 'phone' } // Where i remove this column datatable works file
            ]
        });
    });
</script>

Here is my controller handling view and datatables

function index()
{
    $data['page_title'] = 'Users';
    $data['panel_title'] = 'User list';
    $data['panel_description'] = 'Add, Edit Delete and deactivate users';
    $data['users'] =  User::all();
    return view('settings.users.user_list', $data);
}

function datatable(){
    return Datatables::of(User::query()->with('role')->get())->make(true);
}

Here is my routes

Route::get('users', 'UserController@index')->name('user_list');
Route::get('datatable', 'UserController@datatable')->name('user_datatable_data');

via Chebli Mohamed