Level 104
That behaviour should only be happening below the sm breakpoint unless the default pagination Blade template has been modified; what is the viewport width?
1 like
Sep 30, 2024
12
Level 3
why paginate() show only next and previous with out page numbers
Hello friends my regular pagination method ->paginate() show only next and previus buttons without page number
- using laravel 11 + livewire 3
<?php
namespace App\Livewire\Admin\Task;
use Livewire\Component;
use App\Traits\HasModal;
use Livewire\WithPagination;
class TaskIndex extends Component
{
use HasModal, WithPagination;
#[Computed]
public function tasks()
{
return Task::select(['id', 'project_id', 'title', 'priority', 'created_at'])->with('project','project.images')->latest()->paginate(10);
}
public function render()
{
return view('livewire.admin.task.task-index');
}
}
- in task-index.blade.php
{{ $this->tasks->links() }}
Level 3
@tykus first thansk for answer viewport is (xl) screen i use and code in head in layout.blade.php like
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zain:wght@300;400;700&display=swap" rel="stylesheet">
<title>{{ $title ?? 'Pro Manager' }}</title>
@livewireStyles
@stack('css')
@vite(['resources/js/app.js', 'resources/css/app.css'])
</head>
Level 104
@Respect thanks for that, what I meant is the width of the window, i.e.
window.innerWidth
Incidentally, can you post the markup for the pagination links as rendered in the Browser?
1 like
Level 3
@tykus i did it in livewire page 1600
@push('js')
<script>
console.log(window.innerWidth) // 1600
</script>
@endpush
Level 104
@Respect okay, definitely above the sm breakpoint.
If you inspect the markup for the pagination links in the browser's devtools, what does it look like?
1 like
Level 3
@tykus Like normal, except section of pagination showing 2 buttons previous and next only not buttons for number yet- this section full screen width alos
Level 104
@Respect so you have something like the following structure with two distinct divs for markup showing Prev and Next versus the numbers?
<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
<!-- smaller than sm -->
<div class="flex justify-between flex-1 sm:hidden">
<a href="http://livewire.test/tasks?page=1" class="...">« Previous</a>
<a href="http://livewire.test/tasks?page=3" class="...">Next »</a>
</div>
<!-- bigger than sm -->
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700 leading-5 dark:text-gray-400">
Showing X to Y of Z results
</p>
</div>
<div>
<!-- the numbers -->
</div>
</nav>
1 like
Level 3
@tykus no bro just like this only
<div class="flex justify-between flex-1 sm:hidden">
<a href="http://livewire.test/tasks?page=1" class="...">« Previous</a>
<a href="http://livewire.test/tasks?page=3" class="...">Next »</a>
</div>
Level 104
@Respect yes but sm:hidden means this is hidden above the sm breakpoint, so there should be another div with markup to be displayed above sm width, e.g. hidden by default and sm:flex-1 to be seen above sm width.
You are using Tailwind CSS, right?
1 like
Level 3
@tykus yeah using tawind css - tested it nothing more shown steel previus and next
Level 104
@Respect somethings not adding up here... there should be nothing being displayed at the larger breakpoints, but you're still seeing the links? Are the pagination views published (resources/views/vendor/pagination) and have been modified? Is Tailwind compiling based on the correct content? Stumped...
1 like
Level 3
@tykus really it's very wired i think i will make full debug on my tailwind code to see where is the problem and your note about sm size i think this will be the key for fix it --- will post the result after i finish debug (really thanks for your time)
Please or to participate in this conversation.