[英]Paginate results with Vue.Js / Inertia.js and Laravel
我正在尝试在 Vue.Js 中对来自 Laravel 的数据进行分页。 我也在使用 Inertia.js。
在我的 Laravel Controller 我有:
$data['participants'] = User::with('groups')->select('id', 'name')->paginate(2);
return inertia('Dashboard/Participants', $data);
这在 Vue 中连续输出了我的两个用户。 我也期待链接 object 用于分页。 我在我的 Vue 道具中没有看到这一点。
如果我检查我的 Vue 道具,我有以下 object:
participants:Object
current_page:1
data:Array[2]
first_page_url:"http://localhost:3000/dashboard/participants?page=1"
from:1
last_page:51
last_page_url:"http://localhost:3000/dashboard/participants?page=51"
next_page_url:"http://localhost:3000/dashboard/participants?page=2"
path:"http://localhost:3000/dashboard/participants"
per_page:2
prev_page_url:null
to:2
total:101
如果我:
dd($data['participants']->links());
在 controller 我可以看到:
Illuminate\View\View {#316 ▼
#factory: Illuminate\View\Factory {#310 ▶}
#engine: Facade\Ignition\Views\Engines\CompilerEngine {#328 ▶}
#view: "pagination::bootstrap-4"
#data: array:2 [▶]
#path: "/Users/ejntaylor/Documents/Laravel/motional/vendor/laravel/framework/src/Illuminate/Pagination/resources/views/bootstrap-4.blade.php"
}
我一直在寻找PingCRM的灵感,但没有运气 - 我在链接中引用了。 帮助表示赞赏。
似乎默认的 Laravel 分页不适用于 Inertia.JS,因此您必须前往 AppServiceProvider.php 文件并添加以下内容以使分页正常工作。
这是取自PingCRM
protected function registerLengthAwarePaginator()
{
$this->app->bind(LengthAwarePaginator::class, function ($app, $values) {
return new class(...array_values($values)) extends LengthAwarePaginator {
public function only(...$attributes)
{
return $this->transform(function ($item) use ($attributes) {
return $item->only($attributes);
});
}
public function transform($callback)
{
$this->items->transform($callback);
return $this;
}
public function toArray()
{
return [
'data' => $this->items->toArray(),
'links' => $this->links(),
];
}
public function links($view = null, $data = [])
{
$this->appends(Request::all());
$window = UrlWindow::make($this);
$elements = array_filter([
$window['first'],
is_array($window['slider']) ? '...' : null,
$window['slider'],
is_array($window['last']) ? '...' : null,
$window['last'],
]);
return Collection::make($elements)->flatMap(function ($item) {
if (is_array($item)) {
return Collection::make($item)->map(function ($url, $page) {
return [
'url' => $url,
'label' => $page,
'active' => $this->currentPage() === $page,
];
});
} else {
return [
[
'url' => null,
'label' => '...',
'active' => false,
],
];
}
})->prepend([
'url' => $this->previousPageUrl(),
'label' => 'Previous',
'active' => false,
])->push([
'url' => $this->nextPageUrl(),
'label' => 'Next',
'active' => false,
]);
}
};
});
}
我遇到了类似的问题,并注意到基本的链接()不适用于 Inertia 和 Vue,所以我制作了一个简单的 Vue 组件,在其中我使用了从 Inertia 渲染方法获得的 Paginator Object,它在没有 ServiceProvider 的情况下非常适合我解决方法。
我可以用
public function index()
{
return Inertia::render('MyUserList',[
'paginator' => User::paginate(10)
]);
}
像我通常那样。 然后我将分页器 Object 绑定到我的 Vue 组件,这样我就可以利用它来创建一个基本的分页器组件。 这样我就可以在我想要的任何地方使用和重用<Paginator:paginator="paginator" />
。
<template>
<Paginator :paginator="paginator" />
</template>
<script>
import Paginator from "@/Components/Paginator";
export default {
props: {
paginator: Object
},
}
</script>
我还创建了一个 package,因此您可以根据需要通过 composer 将其拉入。 有关更多信息,请参阅https://github.com/svnwa/InertiaVuePaginator以及我创建的分页器组件的“组件”文件夹。 我希望它在未来对其他人有所帮助:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.