如何在react中使用laravel上的惯性进行分页?

Question

如何在laravel上使用inertia在react上分页?

提取分页数据:

$contacts = Contact::orderBy('name', 'asc')->paginate(10);
return Inertia::render('Contacts/index', [
'contacts' => $contacts
]);

我知道如何呈现在blade({{ $contacts->links() }})的链接，但有办法做到这一点，在inertia或我需要使我自己的组件分页链接?

Answer 1

最简单的方法是使用链接创建您自己的组件(这些链接仍然存在)

这是vue中的一个例子，但应该很容易移植到react中:

<template>
<div>
<div class="flex flex-wrap -mb-1">
<template v-for="(link, key) in links" :key="key">
<div v-if="link.url === null" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
v-html="link.label" />
<inertia-link v-else
class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500"
:class="{ 'bg-blue-700 text-white': link.active }" :href="link.url" v-html="link.label" />
</template>
</div>
</div>
</template>
<script>
export default {
props: {
links: Array
},
}
</script>

Answer 2

您可以尝试以下操作以获得更好的效果:-

import DataTable from "react-data-table-component";

<DataTable
style={{ background: "transparent" }}
title="User"
columns={columns}
data={allData}
defaultSortFieldId={1}
sortIcon={<ArrowUpwardIcon />}
pagination
/>