如何在Laravel中使用Ajax使用搜索栏?

时间:2019-04-11 07:50:08

标签: ajax laravel mongodb search

在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 (App\User::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 (App\User::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>&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 App\Http\Controllers;

use App\Department;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Schema;

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'));
    }

0 个答案:

没有答案