Use WithPagination broken pagination

abkrim · December 8, 2020, 10:52am

I’m reading and working with tutorial Building Data tables

When I go to change my Livewire component Dashboard, for use WithPagination links for pagination broken.

Steps to Reproduce:

After add on Livewire component use WithPagination

<span wire:key="paginator-page2">
<button wire:click="gotoPage(2)" 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:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 2">
2
</button>
</span>

Working without pagination

<span class="relative z-0 inline-flex shadow-sm rounded-md">

<span aria-disabled="true" aria-label="&amp;laquo; Anterior">
<span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
<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>
</span>
</span>                                                                          <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">1</span>
</span>                                                                            <a href="https://albarid8.test/dashboard?page=2" 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 2">
2
</a>                                                                            <a href="https://albarid8.test/dashboard?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="https://albarid8.test/dashboard?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="https://albarid8.test/dashboard?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="https://albarid8.test/dashboard?page=6" 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 6">
6
</a>                                                                              <a href="https://albarid8.test/dashboard?page=7" 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 7">
7
</a>                                                                              <a href="https://albarid8.test/dashboard?page=8" 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 8">
8
</a>                                                                              <a href="https://albarid8.test/dashboard?page=9" 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 9">
9
</a>                                                                              <a href="https://albarid8.test/dashboard?page=10" 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 10">
10
</a>                                                                              <a href="https://albarid8.test/dashboard?page=11" 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 11">
11
</a>                                                      
<a href="https://albarid8.test/dashboard?page=2" 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="Siguiente &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>

<?php

namespace App\Http\Livewire;

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

class Dashboard extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.dashboard', [
            'users' => User::paginate(10),
        ]);
    }
}

Use latest livewire, and licensed tailwindui with Laravel 8

shortbrownman · December 9, 2020, 3:21pm

Typically, when you’re doing pagination, you’d just use the blade syntax to propagate your pagination links on page: {{ $users->links() }} but you should be able to make a button with wire:click="gotoPage(2)" and have it perform the action. I have pagination working on some of my code and just verified that the gotoPage action works.

One thing that might affecting livewire is the lack of root element. Is the blade code you supplied wrapped within a parent element like <div>? From the code you posted, it looks like your top-most element has some livewire stuff on it. Try wrapping everything in a <div> or <span> to see if that helps.

abkrim · December 9, 2020, 4:49pm

Obviously the code is in the page since as I say in the title, and in the text, everything works fine, pagination included until I try to use WithPagination.
If the blade code works, the question is not whether it is there or not, the livewrire container div, it is, because obviously it works without adding use WithPagination in the livewire component that calls the blade template.

As far as I have seen, use WithPagination is not in charge of paging but rather a trait that speeds up paging.

As I say the mystery for me, is that pagination works perfectly until using the WithPagination trait, at which point the {{$ users-> links ()}} tag stops rendering the necessary code for the forward and back buttons, and those corresponding to the page numbers, have the proper code. It simply shows them, but in the link.

Very grateful anyway for your time.

dashboard.blade.php

@extends('layouts.app')

@section('content')
<div>
    <h1 class="text-2xl font-semibold text-gray-900">Dashboard</h1>

    <div class="py-4">
        <div class="flex-col space-y-4">
            <x-table>
            <x-slot name="head">
                <x-table.heading sortable>Name</x-table.heading>
                <x-table.heading sortable>Email</x-table.heading>
                <x-table.heading sortable>Active</x-table.heading>
                <x-table.heading sortable>SuperAdmin</x-table.heading>
            </x-slot>
            <x-slot name="body">
                @foreach($users as $user)
                    <x-table.row class="bg-gray-100 odd:bg-white hover:bg-gray-300">
                        <x-table.cell>{{ $user->name }}</x-table.cell>
                        <x-table.cell>{{ $user->email }}</x-table.cell>
                        <x-table.cell>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-{{ $user->is_active_color }}-100 text-{{ $user->is_active_color }}-800 capitalize">
                            {{ $user->active ? 'Activo' : 'Desactivado' }}
                            <span>
                        </x-table.cell>
                        <x-table.cell>{{ $user->is_super_admin ? 'Si' : 'No' }}</x-table.cell>
                    </x-table.row>
                @endforeach
            </x-slot>
        </x-table>
            <div>
                {{ $users->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

shortbrownman · December 9, 2020, 5:06pm

Is the dashboard.blade.php file your component file? How are you including livewire stuff? Typically, you’d do this in a view to include your component:

@section('content')
    <livewire:dashboard />
@endSection

To me, it just looks like a regular blade view with nothing livewired. Does your layouts.app file have the livewire styles and scripts?

abkrim · December 9, 2020, 5:36pm

A lot of thank.

A mistake for me. I’m using my own dashboard, and I not see that taht blade for livewrie componets work on diferent way.

I’m checking my dashbaord for adapt to livewire.