Laravel 8 使用ajax 过滤数据

Question

我想过滤表中的数据。网上看了很多教程，还是不太明白。我发现了一个对我来说似乎非常复杂的教程。我只想使用控制器和视图。该教程中使用了常量，并且过滤器数据是静态的，但我不想使用它，并且我的过滤器数据是动态的。

教程的代码在这里给出：

应用程序/常量/全局常量

<?php 
namespace App\Constants;

class GlobalConstants {
    const USER_TYPE_FRONTEND = "frontend";
    const USER_TYPE_BACKEND = "backend";
    const ALL = 'All';
    const LIST_TYPE = [self::USER_TYPE_FRONTEND, self::USER_TYPE_BACKEND];
    const LIST_COUNTRIES = ["Canada", "Uganda", "Malaysia", "Finland", "Spain", "Norway"];
    const SALARY_RANGE = ['401762', '85295', '287072', '456969', '354165'];
}

应用程序/用户

  public static function getUsers($search_keyword, $country, $sort_by, $range) {
        $users = DB::table('users');

        if($search_keyword && !empty($search_keyword)) {
            $users->where(function($q) use ($search_keyword) {
                $q->where('users.fname', 'like', "%{$search_keyword}%")
                ->orWhere('users.lname', 'like', "%{$search_keyword}%");
            });
        }

        // Filter By Country
        if($country && $country!= GlobalConstants::ALL) {
            $users = $users->where('users.country', $country);
        }

        // Filter By Type
        if($sort_by) {
            $sort_by = lcfirst($sort_by);
            if($sort_by == GlobalConstants::USER_TYPE_FRONTEND) {
                $users = $users->where('users.type', $sort_by);
            } else if($sort_by == GlobalConstants::USER_TYPE_BACKEND) {
                $users = $users->where('users.type', $sort_by);
            }
        }

        // Filter By Salaries
        if ($range && $range != GlobalConstants::ALL) {
            $users = $users->where('users.salary', $range);
        }
        return $users->paginate(PER_PAGE_LIMIT);
    }

应用程序/Http/控制器/HomeController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use App\Constants\GlobalConstants;

class HomeController extends Controller
{
    public function index() {
        $users = User::getUsers('', GlobalConstants::ALL, GlobalConstants::ALL, GlobalConstants::ALL);
        return view('home')->with('users', $users);
    }

    public function getMoreUsers(Request $request) {
        $query = $request->search_query;
        $country = $request->country;
        $sort_by = $request->sort_by;
        $range = $request->range;
        if($request->ajax()) {
            $users = User::getUsers($query, $country, $sort_by, $range);
                return view('pages.user_data', compact('users'))->render();
        }
    }
}

查看代码

  @foreach($users as $key)
  <div class="card">
    <div class="card-header">
      <img src="{{ asset('assets/images/dev.png') }}" alt="" />
    </div>
    <div class="card-body">
      <span class="tag tag-pink">{{ $key->type }}</span>
      <hr>
      <span class="tag tag-salary">Salary: {{ $key->salary }}</span>  
      <h4>{{ $key->email }}</h4>
      <p>
        {{ $key->address }}
      </p>

      <h4>Country: {{ $key->country }}</h4>
      <div class="user">
        @php
        $user=App\User::find($key->id)
        @endphp
        <img src="{{ asset('assets/images/user-3.jpg') }}" alt="" />
        <div class="key-info">
          <h5>{{ $user['fullname'] }}</h5>
          <small>{{ date('d.m.Y H:i:s', strtotime($key->created_at)) }}</small>
    
        </div>
      </div>
    </div>
  </div>
  @endforeach

<script>
    $(document).ready(function() {
        $(document).on('click', '.pagination a', function(event) {
          event.preventDefault();
          var page = $(this).attr('href').split('page=')[1];
          getMoreUsers(page);
        });
        $('#search').on('keyup', function() {
          $value = $(this).val();
          getMoreUsers(1);
        });
        $('#country').on('change', function() {
          getMoreUsers();
        });
        $('#sort_by').on('change', function (e) {
                    getMoreUsers();
        });
        
        $('#salary_range').on('change', function (e) {
                    getMoreUsers();
                });
    });
    function getMoreUsers(page) {
      var search = $('#search').val();
      // Search on based of country
      var selectedCountry = $("#country option:selected").val();
      // Search on based of type
      var selectedType = $("#sort_by option:selected").val();
      // Search on based of salary
      var selectedRange = $("#salary_range option:selected").val();
      $.ajax({
        type: "GET",
        data: {
          'search_query':search,
          'country': selectedCountry,
          'sort_by': selectedType,
          'range': selectedRange
        },
        url: "{{ route('users.get-more-users') }}" + "?page=" + page,
        success:function(data) {
          $('#user_data').html(data);
        }
      });
    }
  </script>

Answer 1

PHP：

public function create(Request $request)
{
   $doctors = Doctors::all();


   $query = doctors_slots::query();

    'services.*','consultation.*')  
    // ->get();


   if($request->ajax()){
   
    $doctors_slots = $query->where(['doc_id'=>$request->doctors])->get();
   


    return response()->json(compact('doctors_slot'));

   }

       $doctors_slots = $query->get();

   return view('Admin.booking.add_booking',compact('doctors','doctors_slots'));

}

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $("#doctors").on('change', function() {
            var doctors = $(this).val();
            $.ajax({
                url: "{{ route('booking') }}",
                type: "GET",
                data: {
                    'doctors': doctors
                },
                success: function(data) {
                    var doctors_slots = data.doctors_slots;
                    var html = '';
                    if (doctors_slots.length > 0) {

                        for (let i = 0; i < doctors_slots.length; i++) {

                            html += '<option value="' + doctors_slots[i][
                                'available_time_start'
                            ] + '' + doctors_slots[i]['available_time_end'] + '">\
                                        ' + doctors_slots[i]['available_time_start'] + ' To\
                                        ' + doctors_slots[i]['available_time_end'] + '\
                                        </option>';
                        }
                    } else {
                        html += '<option>No Data Found</option>';
                    }
                    $('#option').html(html);
                }
            });
        });
    });
</script>