how to implement Laravel AJAX live search on CRUD management table? - ajax

Question

I have a CRUD table that's holding records of doctors that get
retrieved from the MySQL database. I've been following a few tutorials
and managed to set up AJAX live results search.
Now the problem comes from the fact that the logic is stored in a
Controller. I can succesfully retrieve the details from the database
using '-- foreach($data as $row) --' but I don't know how to retrieve
the CRUD actions ( In this case Delete.The create method is separated
from the table itself. I also can't implement status cell using i)
I've tried putting the actions inside the td'. .'td. tags but I get
Routing errors.
Any help is appreciated.
I have the code for the CRUD actions, images etc..inside
"index.blade.php". They should be somehow implemented in the
controller though. doctor controller
function liveSearchDoctor(Request $request)
{
if($request->ajax())
{
$output = '';
$query = $request->get('query');
if($query != '')
{
$data =Doctor::
where('name', 'like', '%'.$query.'%')
->orWhere('mobile', 'like', '%'.$query.'%')
->orWhere('email', 'like', '%'.$query.'%')
->orderBy('id', 'desc')
->paginate(2);
}
else
{
$data =Doctor::latest()->paginate(2);
}
$total_data = $data->count();
if($total_data > 0)
{
foreach($data as $row)
{
$output .= '
<tr>
<td class="center"><img src="'.$row->image.'" style="width:40px;height:40px;"/></td>
<td>'.$row->id.'</td>
<td>'.$row->name.'</td>
<td>'.$row->department->name.'</td>
<td>'.$row->email.'</td>
<td>'.$row->mobile.'</td>
//status should be implement here
<td><a class="btn btn-primary" href="'.route('doctors.edit',$row->id).'"><i class="fas fa-edit">Edit</i></a>
//delete form should be implement here
</td>
</tr>
';
}
}
else
{
$output = '
<tr>
<td align="center" colspan="5">No Data Found</td>
</tr>
';
}
$data = array(
'table_data' => $output,
'total_data' => $total_data
);
echo json_encode($data);
}
}
index.blade.php (( Note: The CRUD actions and everything is here
implemented succesfully. I however can't implement delete in the
controller )) here is the index.blade.php
#extends('layout.master')
#section('css')
#endsection
#section('content')
<br>
<div class="br-pagebody">
<div class="br-section-wrapper">
#include('include._message')
<div class="row">
<h6 class="br-section-label">Doctors List</h6>
</div>
<div class="row">
<div class="col-lg-4 ">
<div class="form-group">
<input type="text" name="search" id="search" class="form-control" placeholder="Search doctor Data" />
</div>
</div>
<div class="col-lg-3 offset-lg-5">
Add New Doctor
</div>
</div>
</br>
<div class="table-responsive">
<table class="table table-bordered table-colored table-dark">
<thead class="thead-colored thead-dark">
<tr>
<th>Image</th>
<th>Doctor Id</th>
<th>Name</th>
<th>Department</th>
<th>Email</th>
<th>mobile</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach($doctors as $doctor)
<tr>
<td class="center"><img src="{{URL::asset($doctor->image)}}" style="width:40px;height:40px;"/></td>
<td class="center">{{$doctor->id}}</td>
<td class="center">{{$doctor->name}}</td>
<td class="center">{{$doctor->department->name}}</td>
<td class="center">{{$doctor->email}}</td>
<td class="center">{{$doctor->mobile}}</td>
<td class="center">
#if($doctor->status==1)
<span class="badge badge-success">Active</span>
#else
<span class="label label-danger">Deactive</span>
#endif
</td>
<td class="center">
<a class="btn btn-primary" href="{{route('doctors.edit',$doctor->id)}}">
<i class="fas fa-edit">Edit</i>
</a>
{!! Form::open(['method' => 'DELETE','route' => ['doctors.destroy', $doctor->id],'style'=>'display:inline']) !!}
{!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}
{!! Form::close() !!}
</td>
</tr>
#endforeach
</tbody>
</table>
</div><!-- table-wrapper -->
<div class="d-flex justify-content-center">
{!! $doctors->links() !!}
</div>
</div>
</div>
#endsection
#section('js')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
fetch_doctor_data();
function fetch_doctor_data(query = '')
{
console.log(query)
$.ajax({
url:"{{route('search.doctor')}}",
method:"GET",
data:{'query':query},
dataType:'json',
success:function(data)
{
console.log(data)
$('tbody').html(data.table_data);
}
})
}
$(document).on('keyup', '#search', function(){
var query = $(this).val();
fetch_doctor_data(query);
});
});
</script>
#endsection