Question

我有一个简单的视图，显示查询结果

$number = 5;
$events = Event1::has('users', '<', 1)->latest()->take($number)->get();

TASK： 现在我想创建一些过滤器和排序方法......并且能够在没有页面重新加载的情况下刷新显示的结果

在我的视图文件中，我有这个：

<div id="top5-list">
@foreach($events as $event)
 ///
@endforeach

</div>

**

待办事项

** 我希望实施以下方案，如果可能的话，在同一个视图中工作：

SCENARIO 1）使用相同的查询，但更改参数的值 - 就像上面的示例一样 - 变量$ number更改显示结果的数量。

最优选的是，我希望使用多个变量

情景2）为每个用户可选择的观看模式构建单独的查询 - 例如

过滤器名为：show top - 使用此查询刷新内容：

$events = Event1::has('users', '<', 1)->latest()->take($number)->get();

和过滤器名为show best - 使用此完全重建的查询的结果刷新内容：

$events = Event1::whereHas('users', function($q){
$q->where('importance', 0);})->get();

情景2-A

在一个视图中，我将拥有一个包含多个项目的前10个列表前五大事件和前五大实体并列

我想要的功能：通过按下按钮，可以更改负责显示前5名的查询，例如从“前5名最重要”切换

$events = ...query_1...
$entities = ...query_1...

进入“前5名最受欢迎”

$events = ...query_2...
$entities = ...query_2...

情景3）我的目标是建立一个过滤器，可以通过点击无，一个或多个类型来实时整理书籍。正如我的另一个问题所示：how to filter records filtered by more than one criterion in pivot table - laravel eloquent collections

Answer 1

好的，这很简单。

在您的VIEW文件中，您需要定义一个定义了id的DIV（或任何元素），例如id="list_records"

<div id="list_records">
     // it can be empty or you can put a loading gif file
</div>

现在您需要在routes.php中定义路由为了使这些指令更简单，我将代码放在路由定义中，但是应该放置它在控制器方法中。

Route::get('a-test', function() {

    $rnd = rand(1, 5); // varying number erves as a marker to show it works
    $posts= Posts::
            ->take($rnd)
            ->get();

return View::make('experiments.testa', compact('top5events','rnd','posts'));
});

如您所见，您需要创建一个VIEW文件：VIEWS / EXPERIMENTS / testa.blade.php

文件内容：

{{ $rnd or 'random variable is missing!'}} 
// a feedback for beginners: will show that the AJAX is working even if the loop count would be zero records.


    @foreach($postsas $post)

       <p>{{ $post->title}}</p>  // just to print something

    @endforeach

现在在主视图文件中你需要放一些JS：

{{ HTML::script('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js') }}

<script type="text/javascript">

function myFunction（）{

$("#list_records").toggleClass( "csh_12" )
$('#list_records').load('a-test');
}
</script>

注意： toggleClass用于让您看到JS正在运行并且JQuery已正确加载。您需要在CSS文件中定义CSS类csh_12。例如：

.csh_12 {background: red;}

现在你需要一个按钮来触发重新加载：

<button id="demo" onclick="myFunction()">Refresh the list</button>

就是这样！现在地板是你的！

无需重新加载页面即可更改/更新页面内容 - 由AJAX Laravel提供

待办事项

1 个答案: