Блог

Я новичок в Laravel и пытаюсь реализовать поиск и фильтрацию в реальном времени в своем проекте, но это вообще не работает. Я не очень разбираюсь в версии ajax и просто копирую вставленный код с другого веб-сайта. Я пытался понять код, и я думаю, что он правильный, но он не работает, поэтому, пожалуйста, помогите. Спасибо

Вот мой контроллер

  public function search(Request $request)
{
    if($request->ajax())
    {
        $output = '';
        $query = $request->get('query');
        if($query != '')
        {
            $data = Service::table('service')
                ->where('keterangan', 'like', '%'.$query.'%')
                ->orWhere('biaya', 'like', '%'.$query.'%')
                ->get();
        }
        else
        {
            $data = Service::table('service')
            ->orderBy('kodeService', 'asc')
            ->get();
        }
        $total_row = $data->count();
        if($total_row > 0)
        {
            foreach($data as $row)
            {
                $output .= '
                <tr>
                <td>'.$row->kodeService.'</td>
                <td>'.$row->keterangan.'</td>
                <td>'.$row->biayaService.'</td>
                </tr>
                ';
            }
        }
        else
        {
            $output = '
            <tr>
            <td align="center" colspan="5">No Data Found</td>
            </tr>
            ';
        }
        $data = array(
            'table_data'  => $output
        );
        echo json_encode($data);
    }
}
  

Это скрипт

 $(document).ready(function(){
fetch_customer_data();
function fetch_customer_data(query = '')
{
    $.ajax({
            url:"{{ route('live_search.action') }}",
            method:'GET',
            data:{query:query},
            dataType:'json',
            success:function(data)
            {
                $('#table tbody').html(data.table_data);
            }
    });
}

$(document).on('keyup', '#search', function(){
    var query = $(this).val();
    fetch_customer_data(query)
});
  

});

Маршрут :

 Route::resource('service', 'ServiceController');
Route::get('service/search', 'Service@search')->name('live_search.action');
  

И index.blade

  <table class="table table-striped table-hover table-bordered" id="table">
    <thead>
        <tr>
            <th>Kode Service</th>
            <th>Keterangan</th>
            <th>Biaya</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
        @foreach($service as $data)
        <tr>
            <td><?= $data->kodeService?></td>
            <td><?= $data->keterangan ?></td>
            <td><?= $data->biayaService?></td>
            <td>

                <a class="btn btn-sm btn-info" href="{{ route('service.edit', $data['kodeService']) }}"> <i class="oi oi-pencil"></i> Edit</a>
                <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal"><span class="oi oi-trash"></span> Hapus</button>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
  

Поместите свой маршрут следующим образом :

 Route::get('service/search', 'ServiceController@search')->name('live_search.action');
Route::resource('service', 'ServiceController');
  

После этого откройте панель консоли браузера (нажмите F12, чтобы открыть ее) и проверьте запрос Ajax на вкладке Сеть.

Где вы можете получить конкретную ошибку, если таковая имеется, на вкладке ответа.

Если вам нужен дополнительный маршрут к вашему ресурсному маршруту, вы должны поместить новый маршрут перед ресурсным маршрутом.

  Route::get('service/search', 'ServiceController@search')->name('live_search.action');
 Route::resource('service', 'ServiceController');