我正在用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中设置?很抱歉给你带来了困惑,但我不明白我能遵循的最好方法。
发布于 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>
发布于 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() }}
如果有人有更好的方法,请随时发表评论!
https://stackoverflow.com/questions/56277769
复制相似问题