Laravel Voyager 服务器端分页链接未显示

Question

我正在使用 Laravel 8.4 ("laravel/framework": "^8.40") 和 Voyager 1.4 ("tcg/voyager": "^1.4") 进行开发。

我在使用 Laravel Voyager 时遇到了一个不寻常的错误。当我为任何 BREAD 激活服务器端分页时，分页链接部分中断如下：

但是，当我关闭服务器端分页时，它们可以正常工作，如下所示：

我在浏览器控制台或其他地方没有收到任何错误消息。

虽然“<< Previous”和“Next >>”按钮按预期工作，但它们没有样式。

我检查了特定部分的 HTML。链接在那里，但由于某种原因没有在浏览器中正确显示。该部分的HTML如下：

<div class="pull-right">
                                <nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
        <div class="flex justify-between flex-1 sm:hidden">
                            <a href="http://tabapp.test/admin/departments?sort_order=desc&amp;showSoftDeleted=0&amp;page=1" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                    « Previous
                </a>
            
                            <a href="http://tabapp.test/admin/departments?sort_order=desc&amp;showSoftDeleted=0&amp;page=3" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                    Next »
                </a>
                    </div>

        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
                <p class="text-sm text-gray-700 leading-5">
                    Showing
                    <span class="font-medium">16</span>
                    to
                    <span class="font-medium">30</span>
                    of
                    <span class="font-medium">67</span>
                    results
                </p>
            </div>

            <div>
                <span class="relative z-0 inline-flex shadow-sm rounded-md">
                    
                                            <a href="http://tabapp.test/admin/departments?sort_order=desc&amp;showSoftDeleted=0&amp;page=1" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="&amp;laquo; Previous">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                        </a>
                    
                    
                                            
                        
                        
                                                                                                                        <a href="http://tabapp.test/admin/departments?sort_order=desc&amp;showSoftDeleted=0&amp;page=1" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 1">
                                        1
                                    </a>
                                                                                                                                <span aria-current="page">
                                        <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">2</span>
                                    </span>
                                                                                                                                <a href="http://tabapp.test/admin/departments?sort_order=desc&amp;showSoftDeleted=0&amp;page=3" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 3">
                                        3
                                    </a>
                                                                                                                                <a href="http://tabapp.test/admin/departments?sort_order=desc&amp;showSoftDeleted=0&amp;page=4" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 4">
                                        4
                                    </a>
                                                                                                                                <a href="http://tabapp.test/admin/departments?sort_order=desc&amp;showSoftDeleted=0&amp;page=5" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 5">
                                        5
                                    </a>
                                                                                                        
                    
                                            <a href="http://tabapp.test/admin/departments?sort_order=desc&amp;showSoftDeleted=0&amp;page=3" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="Next &amp;raquo;">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                            </svg>
                        </a>
                                    </span>
            </div>
        </div>
    </nav>

                            </div>

我需要服务器端分页，因为会有大量的数据从后端传来要渲染。当行数超过 1K 时，只有客户端 DataTable 变得相当慢。

否则，我将需要考虑为我的许多需要此类数据处理的模型创建自定义 CRUD。

Answer 1

很简单，在您的 AppServiceProvider 文件中插入两行：

use Illuminate\Pagination\Paginator;

public function boot(){
    Paginator::useBootstrap();
}

Laravel Voyager 服务器端分页链接未显示

Laravel Voyager server-side pagination links not showing

laravel

pagination

server-side

voyager

laravel-pagination