Как реализовать поисковую систему Laravel в представлении Blade

Question

Я строю систему продуктов / категорий CRUD в Laravel. Каждая категория продуктов HasMany и каждый продукт принадлежит к категории. Теперь в моем индексном файле товара я перечисляю в таблице все товары, показывая их данные и их категорию.

Это Контроллер продукта:

public function index()
{

    // $products = Product::all();

    $products = Product::orderBy('id')->paginate(15);
    return view('product.index', compact('products'));
}

А вот мой вид лезвия:

<div class="row">
            <div class="col-3">
                <h1>Products List</h1>
            </div>
            <div class="col-3">
                <div class="form-group">
                    <label for="exampleFormControlSelect1"><h2>Select Category</h2></label>
                    <select class="form-control" name="product_category" id="exampleFormControlSelect1">
                        {{-- @foreach ($categoryList as $category) --}}
                            {{-- <option>{{$category->slug}}</option> --}}
                         {{-- @endforeach --}}
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="table-responsive">
            <table class="table align-items-center table-hover">
            <thead class="thead-light">
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Category</th>
                    <th scope="col">Name</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($products as $product)
                    <tr>
                        <td>
                            <a href="{{ route('product.show', $product->id)}}">{{ $product->id }}</a>
                        </td>
                        <td>
                            @if(!empty($product->category))
                                {{ $product->category->name }}
                            @else
                                {{ 'No Category' }}
                            @endif
                        </td>
                        <td>
                            <a href="{{ route('product.show', $product->id)}}">{{ $product->name }}</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <hr>
    {{ $products->render() }}
</div>

Теперь, когда я прокомментировал выпадающий список, я хочу дать пользователю возможность выбрать одну категорию, чтобы продукты фильтровались в зависимости от выбранной категории. Какова лучшая и самая быстрая реализация для этого? Я проверил Laravel Scopes, но это выглядит довольно сложно. Кроме того, эта функция поиска должна быть установлена ​​в контроллере или в API? Извините за путаницу, но у меня нет лучшего подхода, который я могу использовать.

Answer 1

Я рекомендую вам использовать библиотеку JavaScript DataTable (https://datatables.net/). Все, что вам нужно сделать, это:

Выполнить:

npm install datatables.net-bs4

Затем, в вашем bootstrap.jsвнутри оператора try:

require('datatables.net-bs4');

В вашем app.scss

@import '~datatables.net-bs4/css/dataTables.bootstrap4.min.css';

Затем запустите

npm run dev

После этого перейдите в свой вид и добавьтеСценарии внизу

$(document).ready( function () {
$('#table_id').DataTable();
} );

Все, что вам нужно сделать сейчас, это добавить «table_id» к идентификатору вашей таблицы.

Вы можете пропустить первые четыре шага, объявив библиотеку jsчерез cdn внутри вашей метки.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8"src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

Answer 2

Наконец я нашел этот подход самым простым:

В моем productController я выбираю продукты с их категорией, используя Eager loading

    if (request()->has('category')) {
        $products = App\Product::whereHas('category', function($query){
            $query->where('slug', request('category'));
        })->paginate(15);
        // dd($products);

    }

Затем в представлении (product.index) я создаю выпадающее меню с тегами привязки разных категорий. Бэкэнд видит, что запрос (url) содержит категорию, которая задается как кусок единственной категории, поэтому элементы соответственно выбираются из БД и затем фильтруются в представлении. Я также заказал их по удостоверению личности и разбил на страницы.

            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="triggerId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Categories
                </button>
                <div class="dropdown-menu">
                    @foreach ($categoryList as $category) 
                        <div class="dropdown-item">
                            <a href="/product/?category={{$category->slug}}">{{$category->slug}}</a>
                        </div>
                    @endforeach
                </div>
            </div>

// to paginate them
    {{ $products->render() }}

Если у кого-то есть лучший подход, не стесняйтесь комментировать!