gpt4 book ai didi

laravel - 使用 Vue.Js/Inertia.js 和 Laravel 对结果进行分页

转载 作者:行者123 更新时间:2023-12-02 00:04:27 32 4
gpt4 key购买 nike

我正在尝试在 Vue.Js 中对来自 Laravel 的数据进行分页。我也在使用 Inertia.js。

在我的 Laravel Controller 中我有:

    $data['participants'] = User::with('groups')->select('id', 'name')->paginate(2);
return inertia('Dashboard/Participants', $data);

这在 Vue 中很好地连续输出了我的两个用户。我还期待链接对象用于分页。我在我的 Vue Prop 中没有看到这一点。

如果我检查我的 Vue Prop ,我有以下对象:

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,
]);
}
};
});
}

关于laravel - 使用 Vue.Js/Inertia.js 和 Laravel 对结果进行分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61076083/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com