首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在刀片视图中实现Laravel搜索系统

如何在刀片视图中实现Laravel搜索系统
EN

Stack Overflow用户
提问于 2019-05-23 22:46:37
回答 2查看 1.1K关注 0票数 0

我正在用Laravel构建一个CRUD产品/类别系统。每个类别HasMany产品和每个产品belongsTo一个类别。现在,在我的索引产品文件中,我在一个表中列出了所有产品,显示了它们的数据和类别。

这是Productcontroller:

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中设置?很抱歉给你带来了困惑,但我不明白我能遵循的最好方法。

EN

回答 2

Stack Overflow用户

发布于 2019-05-24 03:58:31

我建议您使用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“添加到表的id中。

您可以通过在head标记中通过cdn声明js库来跳过前四个步骤。

<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>
票数 2
EN

Stack Overflow用户

发布于 2019-05-25 15:39:48

最后,我发现这种方法是最简单的:

在我的productController中,我使用急切加载来获取产品及其类别

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

    }

然后,在视图(product.index)中,我用不同类别的锚标签创建了一个下拉菜单。后端看到请求(url)带有' category ',它被设置为单一类别的slug,因此相应地从DB获取元素,然后在视图上进行过滤。我还按ID对它们进行了排序,并对它们进行了分页。

            <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() }}

如果有人有更好的方法,请随时发表评论!

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56277769

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档