如何在
react
中使用 inertia
上的 laravel
进行分页?
拉取分页数据:
$contacts = Contact::orderBy('name', 'asc')->paginate(10);
return Inertia::render('Contacts/index', [
'contacts' => $contacts
]);
我知道如何在
blade
({{ $contacts->links() }}
) 中渲染链接,但是有没有办法在 inertia
上做到这一点,或者我是否需要为分页链接制作自己的组件?
JSX
组件<div className="py-10 text-center">
{
contacts.links.map(link => (
link.url ?
<Link
className={`p-1 mx-1 ${link.active ? 'font-bold text-blue-400 underline' : ''}`}
key={link.label} href={link.url} dangerouslySetInnerHTML={{ __html: link.label }} />
:
<span
className="cursor-not-allowed text-gray-300"
key={link.label} dangerouslySetInnerHTML={{ __html: link.label }}>
</span>
))
}
</div>
最简单的方法是使用链接创建自己的组件(那些仍然存在)
这是 vue 中的一个示例,但应该很容易移植以做出反应:
<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>
你可以尝试这个以获得更好的反应结果:-
import DataTable from "react-data-table-component";
<DataTable
style={{ background: "transparent" }}
title="User"
columns={columns}
data={allData}
defaultSortFieldId={1}
sortIcon={<ArrowUpwardIcon />}
pagination
/>