Livewire 分页按钮未显示

Question

我使用 laravel livewire 来生成数据表 然而分页按钮不起作用

我尝试了2种分页方法：

1. pagination() --> 没有显示任何内容
2. simplePagnation() --> 显示按钮，但它奇怪地显示如下：

我已经确定了这些事情：

1. 我的 Livewire 组件上只有一个元素
2. 我已经导入了 WithPagination 特征
3. 编译资源（使用vite js）

使用的堆栈：

1. Laravel 11
2. Livewire 3
3. Tailwindcss 3（带有 flowbite）

我的 Livewire 课程：

<?php

namespace App\Livewire\Users;

use App\Models\User;
use Livewire\Component;
use Livewire\WithPagination;

class Index extends Component
{
    use WithPagination;
    
    public function render()
    {
        return view('livewire.users.index', [
            'users' => User::with(['sections','role'])->simplePaginate(2)
        ]);
    }
}

景色：

<div class="relative sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            ...
        </thead>
        <tbody>
            @foreach ($users as $user)                
            ...
            @endforeach
        </tbody>
    </table>

    <div class="d-flex justify-content-between align-items-center my-4">
        <div>
            <label for="perPage">Tampilkan</label>
            <select name="perPage" id="perPage" class="form-control" wire:model.live="perPage">
                @foreach ($perPageOptions as $page)
                    <option value="{{ $page }}">{{ $page }}</option>
                @endforeach
            </select>
        </div>
        <div>
            {{ $users->links() }}
        </div>
    </div>
</div>

livewire 配置：

return [
    'pagination_theme' => 'tailwind',
];

顺风配置：

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        "./node_modules/flowbite/**/*.js",
    ],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                primary: {
                    50: "#eff6ff",
                    100: "#dbeafe",
                    200: "#bfdbfe",
                    300: "#93c5fd",
                    400: "#60a5fa",
                    500: "#3b82f6",
                    600: "#2563eb",
                    700: "#1d4ed8",
                    800: "#1e40af",
                    900: "#1e3a8a",
                    950: "#172554",
                },
            },
        },
        fontFamily: {
            body: [
                "Inter",
                "ui-sans-serif",
                "system-ui",
                "-apple-system",
                "system-ui",
                "Segoe UI",
                "Roboto",
                "Helvetica Neue",
                "Arial",
                "Noto Sans",
                "sans-serif",
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji",
            ],
            sans: [
                "Inter",
                "ui-sans-serif",
                "system-ui",
                "-apple-system",
                "system-ui",
                "Segoe UI",
                "Roboto",
                "Helvetica Neue",
                "Arial",
                "Noto Sans",
                "sans-serif",
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji",
            ],
        },
    },
    plugins: [require("flowbite/plugin")],
};

如何解决这个问题？

Answer 1

您在 tailwind 的

content

配置中缺少分页视图。您应该添加它以防止相关 CSS 类被清除。

它应该看起来像这样：

content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
],

有关更多信息，请参阅 Laravel 的分页文档：https://laravel.com/docs/11.x/pagination#tailwind-jit