Как я могу использовать панель поиска, используя ajax в laravel?

#ajax #laravel #mongodb #search

#ajax #laravel #mongodb #Поиск

Вопрос:

В laravel я использую панель поиска в виде списка, она будет выполнять поиск из записи с помощью ajax и отображать мне выходные данные.

Но теперь это работает, когда я пишу любой текст в строке поиска, я не получаю никаких результатов. Все записи отображаются как есть.

Моя база данных в MongoDB, и я пишу в laravel. Вот мой код файла просмотра.

Вид

 <div class="table-responsive m-t-40">
  <div class="form-group">
    <input type="text" name="search" id="search" class="form-control" placeholder="Search Department" />
  </div>

  <table class="table table-bordered table-striped ">
    <thead>
      <tr>
        <th>Department Name</th>
        <th>Created By</th>
        <th>Created On</th>
        @if (AppUser::isPermitted(['edit_department', 'update_department', 'delete_department']))
        <th>Action</th>
        @endif
      </tr>
    </thead>
    <tbody>
      @if($listOfDepartment != null)
      @foreach($listOfDepartment as $departmentList)
      <tr>
        <td>{{$departmentList->nameOfDepartment}}</td>
        <td>{{$departmentList->createdBy}}</td>
        <td>{{$departmentList->created_at}}</td>
        @if (AppUser::isPermitted(['edit_department', 'update_department', 'delete_department']))
        <td>
          <a href="{{route('edit_department', $departmentList->id)}}"  data-toggle="modal" data-target="#myEditModal"><i class="fa fa-edit fa-lg" style="color:#0066ff" aria-hidden="true"></i></a>amp;emsp;
          <a href="{{route('delete_department', $departmentList->id)}}"><i class="fa fa-trash fa-lg" onclick="delete_user(this); return false;" style="color:red" aria-hidden="true"></i></a>
        </td>
        @endif
      </tr>
      @endforeach
      @endif
    </tbody>
  </table>
</div>
  

скрипт

 <script>
        $(document).ready(function(){

         fetch_customer_data();

         function fetch_customer_data(query = '')
         {
          $.ajax({
           url:"{{ route('list_department') }}",
           method:'GET',
           data:{query:query},
           dataType:'json',
           success:function(data)
           {
            $('tbody').html(data.table_data);
           }
          })
         }

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

и вот мой код файла контроллера

 namespace AppHttpControllers;

use AppDepartment;
use IlluminateHttpRequest;
use IlluminateSupportFacadesSchema;

public function listDepartment(Request $request)
    {

        $listOfDepartment = Department::all();  

        if($request->ajax())
        {
            $output = '';
            $query = $request->get('query');
        if($query != '')
        {
            $data = Schema::table('department')
                ->where('nameOfDepartment', 'like', '%'.$query.'%')
                ->orWhere('createdBy', 'like', '%'.$query.'%')
                ->get();
        }
        else
        {
            $data = Schema::table('department')
                ->orderBy('nameOfDepartment', 'asc')
                ->get();
        }

        $total_row = $data->count();
        if($total_row > 0)
        {
            foreach($data as $row)
            {
                $output .= '<tr>
                <td>'.$row->nameOfDepartment.'</td>
                <td>'.$row->createdBy.'</td>
                </tr>';
            }
        }
        else
        {
            $output = '
            <tr>
                <td align="center" colspan="5">No Data Found</td>
            </tr>
            ';
        }
            $data = array(
            'table_data'  => $output,
            'total_data'  => $total_row
            );
            echo json_encode($data);
        }

        return view('pages.department', compact('listOfDepartment'));
    }

  

Комментарии:

1. Похоже, вы не возвращаете $data в формате json. return response()->json($data); . Что вы видите на вкладке Сеть? (На самом деле, я бы предложил создать другой маршрут для действия поиска ajax)

2. Нет, это не работает