Laravel Datatables while using Entrust Package - php

Question

I'm using entrust package for roles management , i have impleted that in my project based on the steps which mentioned in github , it's working fine but for assigning roles to user page we are getting values from two queries which i mentioned below , if the user list goes upto 100 how can i get user details easily , i want datatables for this view can anyone please help me to view as datatables format and i already configured yajra datatables for my project , it is working for other pages, we are using https://github.com/Zizaco/entrust
Controller.php
public function index()
{
$company_id=Auth::user()->company_id;
$users=User::where('company_id',$company_id)->get();
$allRoles=Role::where('company_id',$company_id)->get();
return view('usersroles.index',compact(['users','allRoles']));
}
view.blade.php
<table class="table table-bordered" >
<tr class="thead-cls">
<th class="center">Name</th>
<th class="center">Employee Id</th>
<th class="center">Roles</th>
<th class="center">Action</th>
</tr>
#forelse($users as $user)
<tr>
<td class="center">{{$user->name}}</td>
<td class="center">{{$user->emp_id}}</td>
<td class="center">
#foreach( $user->roles as $role)
{{$role->name}},
#endforeach
</td>
<td class="center">
#permission('users-roles-edit')
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-add" data-toggle="modal" data-target="#myModal-{{$user->id}}">
Edit
</button>
#endrole
<!-- Modal -->
<div class="modal fade" id="myModal-{{$user->id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> Editing<b> {{$user->name}}'s</b> Role</h4>
</div>
<div class="modal-body">
<form action="{{route('usersroles.update',$user->id)}}" method="post" role="form" id="role-form-{{$user->id}}">
{{csrf_field()}}
{{method_field('PATCH')}}
<div class="form-group">
<select name="roles[]" multiple required="">
#foreach($allRoles as $role)
<option value="{{$role->id}}">{{$role->name}}</option>
#endforeach
</select>
</div>
{{--<button type="submit" class="btn btn-primary">Submit</button>--}}
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-add" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary btn-add" onclick="$('#role-form-{{$user->id}}').submit()">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
#empty
<td>No users</td>
#endforelse
</table>
[![Need Datatables for this view][1]][1]

Answer 1

Just add this piece of code in your view with jQuery:
$(document).ready(function(){
$('#myTable').DataTable();
});
#myTable is the id of your table. For more info, read the documentation.