[英]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.