laravelpaginationserver-sidevoyagerlaravel-pagination
Laravel Voyager server-side pagination links not showing
I am developing with Laravel 8.4 ("laravel/framework": "^8.40") and Voyager 1.4 ("tcg/voyager": "^1.4").
I am facing an unusual bug with Laravel Voyager. When I am activating Server-Side pagination for any BREAD, the pagination-links section is breaking as below:
However, they are working when I am turning off Server-Side pagination as below:
I am not getting any error messages on the browser console or elsewhere.
The "<< Previous" and "Next >>" buttons are working as expected though, but there's no styling on them.
I have inspected the HTML of the specific part. The Links are present there, but are not being properly presented in browsers for some reason. The HTML of the section is as below:
<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&showSoftDeleted=0&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&showSoftDeleted=0&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&showSoftDeleted=0&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="&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&showSoftDeleted=0&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&showSoftDeleted=0&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&showSoftDeleted=0&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&showSoftDeleted=0&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&showSoftDeleted=0&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 &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>I need server-side pagination, because there will be a lot of data coming from the backend that is to be rendered. Only client-side DataTable is getting fairly slow when the number of rows getting more than 1K.
Otherwise, I will need to consider creating custom CRUDs for many of my models that need such data handling.
Solution
Simple, In your AppServiceProvider file insert both lines:
use Illuminate\Pagination\Paginator;
public function boot(){
Paginator::useBootstrap();
}
- Is Laravel-admin 1.8.19 not compatible with laravel 11.8.0? [Your requirements could not be resolved to an installable set of packages.]
- how to return values from a Laravel Sever to React with inertiajs?
- PHP-ZIP extension is missing on your server. Please install the extension
- Making a CommonController in laravel
- Declare aliases for counts which use the same column with Laravel's Eloquent method loadCount()
- Why loadCount() introduced and its actual usage into laravel
- Nested Eager Loading count
- count with load Laravel
- Laravel Eloquent Lazy Eager Load Count
- Adding CSRF tokens to HTML buttons with HTMX and Laravel 10
- How can I transfer a file from one bucket to another using flysystem?
- Laravel: String data, right truncated: 1406 Data too long for column
- Laravel Add a new column to existing table in a migration
- Add custom 500 error page only for production in Laravel
- How to call .env {{ env('APP_NAME} }} to laravel blade template?
- How to do this in Laravel, subquery where in
- How to increment a column using Eloquent Model in Laravel 4
- Laravel ErrorException- missing argument 2
- Remove All Keys from Redis in PHP
- Laravel issue with extras field
- Laravel - CNAME + Subdomain Routing
- Import an Excel file using AJAX and Laravel
- Laravel Middleware error: Argument #1 ($content) must be of type ?string, Illuminate\Routing\Redirector given
- Laravel: Auth::user()->id trying to get a property of a non-object
- How to create custom helper functions in Laravel
- Laravel HTTP client attach multiple files
- Laravel Filament library magic
- curl error 28 for composer update/install laravel
- Laravel current route name contains
- Unable to see multiple .test domains using Laravel Sail (Docker)