Yajra datatable is not loading data properly in datatable

May be it would be a duplicate but i dont find a proper solution for the problem.. the actual problem is ajax call is working well and return the response data for the table but table always showing loading only.. here what i have done so far.

UserController.php

if($request->ajax())
        {
            $users = User::select('id','name','email','phone','created_at','updated_at')->where('id','!=',Auth::user()->id)->get();

            return DataTables::of($users)
                ->editColumn('action', function ($user) {

                        return ' <a class="icon-color"  href="'.route('users.edit',$user->id).'"><i class="fa fa-edi" aria-hidden="true"></i></a>
                        
                        <a class="icon-color"  href="'.route('users.show',$user->id).'"><i class="fa fa-eye" aria-hidden="true"></i></a>

                        <a class="icon-color"  href="'.route('users.destroy',$user->id).'"><i class="fa fa-trash" aria-hidden="true"></i></a>';

                })
                ->rawColumns(['action'])
                ->make(true);
        }

        return view('manager.users.index');

index.blade.php

<table id="users-table" class="table table-striped table-no-bordered table-hover" >
                            <thead style="font-size: 12px;" class="text-primary">
                            <tr>
                                <th style="text-align: center" width="5%">#</th>
                                <th style="text-align: center" width="20%">Name</th>
                                <th style="text-align: center;" width="25%">Email</th>
                                <th style="text-align: center;" width="10%" >Phone</th>
                                <th style="text-align: center;" width="15%" >Created Date</th>
                                <th style="text-align: center;" width="15%" >Updated Date</th>
                                <th style="text-align: center;" width="10%">Action</th>
                            </tr>
                            </thead>

                            <tbody>

                            </tbody>
                        </table>

script

  $('#users-table').DataTable({
            "lengthMenu": [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            processing: true,
            serverSide: true,
            responsive: true,

            ajax:{
                url:"{{route('users.index')}}",
                type:'get',
                success:function(xhr){
                    toastr.success('Completed!')
                                        }
            },
            columns: [
                {data:'id',name:'id'},
                {data: 'name', name: 'name'},
                {data: 'email', email: 'email'},
                {data: 'phone', name: 'phone'},
                {data: 'created_at', name: 'created_at'},
                {data: 'updated_at', name: 'updated_at'},
                {data: 'action', searchable:false},

            ],
            "order":[[0,'desc']]
        });

and here i capture the screen short of the request response

any one able to find a solution .. any healp would be really appreciated. thanks..