Раскрывающийся фильтр Laravel без кнопки поиска - PullRequest
0 голосов
/ 15 января 2019

У меня есть страница со списком врачей. Все врачи относятся к определенной категории: гинекология, хирургия, урология и т. Д.

Как я могу отфильтровать их с помощью выпадающего списка, не используя кнопку отправки? Я знаю, что этого можно добиться с помощью Ajax, но мне нужна помощь.

Вот мой код:

DoctorsController

public function doctorsList() {
    $doctors = Doctor::orderBy('id', 'desc')->paginate(20);
    $categories = Category::all();
    return view('doctors-list', compact('doctors', 'categories'));
}

врачи-list.blade.php

  <div class="filter text-center">
    <select name="category_id">
      <option value="all">All</option>
      @foreach($categories as $category)
        <option value="{{ $category->id }}">{{ $category->title }}</option>
      @endforeach
    </select>
  </div>
  @foreach($doctors as $doctor)
    <div class="article">
      <div class="row">
        <div class="col-sm-3">
          <div class="image"><a href="{{ route('doctor', $doctor->slug) }}"><img width="260" src="{{ Storage::url($doctor->image) }}" /></a></div>
        </div>
        <div class="col-sm-9 right">
          <div class="title"><h3>{{ $doctor->title }}</h3></div>
          <div class="body">{!! strip_tags(str_limit($doctor->body, 300)) !!}</div>
          <div class="more"><a href="{{ route('doctor', $doctor->slug) }}">More></a></div>
        </div>
      </div>
    </div>
  @endforeach

Маршрут:

Route::get('/doctors', 'DoctorsController@doctorsList')->name('doctorsList');

Миграции (два отдельных файла):

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateDoctorsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('doctors', function (Blueprint $table) {
            $table->increments('id');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('doctors');
    }
}


<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateDoctorTranslationsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('doctor_translations', function (Blueprint $table) {
          $table->increments('id');
          $table->integer('doctor_id')->unsigned();
          $table->string('locale')->index();

          // The actual fields to store the content of your entity. You can add whatever you need.
          $table->string('title');
          $table->string('slug')->unique();
          $table->string('image');
          $table->text('body');
          $table->integer('category_id');
          $table->string('status');
          $table->integer('user_id');

          $table->unique(['doctor_id', 'locale']);
          $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('doctor_translations');
    }
}

Модель: Doctor.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Dimsav\Translatable\Translatable;

class Doctor extends Model
{
  use Translatable;

  public $translatedAttributes = ['title', 'slug', 'image', 'body', 'category_id','status', 'user_id'];

  public function category() {
    return $this->belongsTo('App\Category');
  }
}

DoctorTranslation.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Cviebrock\EloquentSluggable\Sluggable;

class DoctorTranslation extends Model
{
  use Sluggable;

  public $timestamps = false;

  /**
   * Return the sluggable configuration array for this model.
   *
   * @return array
   */
  public function sluggable()
  {
      return [
          'slug' => [
              'source' => 'title',
              'onUpdate' => true
          ]
      ];
  }
}

Прямо сейчас с этим кодом я отображаю всех докторов и создал окно выбора, которое получает категории из базы данных.

Как я могу отфильтровать их, когда я выбираю другую категорию из выпадающего списка?

Я использую Laravel 5.5

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Вот мое решение, в этом решении вам не потребуется серверный вызов

просто дайте идентификатор <div class="article">

дать идентификатор как docs-categoryid-doctorid

теперь на вашем <select name="category_id" onchange="showhidedocs();">

function showhidedocs(){
      var cat=$('#category_id').val();
            if(cat!="all"){
             $('[id^=docs-]').hide();
             var temp="[id^=docs-"+cat+']';
             $(temp).show();
                          }else{
                              $('[id^=docs-]').show();
                              }
                       }
0 голосов
/ 15 января 2019

Вы можете использовать параметр запроса для фильтрации врачей по категориям. Это будет обновленный метод контроллера:

public function doctorsList(Request $request)
{
    $query = (new Doctor)->newQuery();
    $selectedCategory = $request->get('category_id', 'all');

    if (is_numeric($selectedCategory )) {
        $query->whereTranslation('category_id', $selectedCategory);
    }

    $doctors = $query->orderBy('id', 'desc')->paginate(20);
    $categories = Category::all();

    return view('doctors-list', compact('doctors', 'categories', 'selectedCategory'));
}

И шаблон лезвия будет выглядеть примерно так:

<form action="{{route('doctorsList')}}" method="get">
  <div class="filter text-center">
    <select name="category_id" onchange="this.form.submit()">
      <option value="all">All</option>
      @foreach($categories as $category)
        <option value="{{ $category->id }}" {{$category->id == $selectedCategory ? 'selected' : ''}}>{{ $category->title }}</option>
      @endforeach
    </select>
  </div>
</form>
  @foreach($doctors as $doctor)
    <div class="article">
      <div class="row">
        <div class="col-sm-3">
          <div class="image"><a href="{{ route('doctor', $doctor->slug) }}"><img width="260" src="{{ Storage::url($doctor->image) }}" /></a></div>
        </div>
        <div class="col-sm-9 right">
          <div class="title"><h3>{{ $doctor->title }}</h3></div>
          <div class="body">{!! strip_tags(str_limit($doctor->body, 300)) !!}</div>
          <div class="more"><a href="{{ route('doctor', $doctor->slug) }}">More></a></div>
        </div>
      </div>
    </div>
  @endforeach

Конечно, вы можете поместить обработчик onchange где-нибудь в ваши js-файлы вместо того, чтобы делать это встроенным.

Я считал, что вы назвали докторов в списке маршрутов doctors.list

Кроме того, если вы используете это решение, вам следует помнить о необходимости добавления параметра запроса категории в ссылки на нумерацию страниц.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...