Pagination not working as intended?

#1

I have a controller where I pass the value of a search input to update a table of values in my view.

The table is beeing paginated to 5 on each page.

It seems that when I search something while I am on page 1, that everything works well, but when I am on another page than 1 search doesnt show me any result, but pagination still shows up in my view.

This is a very strange behaviour and I am not sure if this is a Livewire bug or that I am just missing something at all.

I am on the latest version of Livewire and already tried out the older v0.5.2.

Controller:

<?php

namespace App\Http\Livewire\Tags;

use App\Tag;
use Exception;
use Illuminate\Contracts\View\Factory;
use Illuminate\View\View;
use Livewire\Component;
use Livewire\WithPagination;

class TagEdit extends Component
{
    use WithPagination;

    public $searchInput;
    protected $searchList;
    protected $pagination = 5;

    /**
     * @param $id
     * @throws Exception
     */
    public function deleteTags($id): void
    {
        $deleteID = Tag::findOrFail($id);
        $deleteID->delete();
    }

    /**
     * @return Factory|View
     */
    public function render()
    {
        $this->searchList = Tag::where('schlagwort', 'like', '%' . $this->searchInput . '%')
            ->orderBy('created_at', 'desc')
            ->paginate($this->pagination);

        return view('livewire.tags.tag-edit', [
            'searchList' => $this->searchList,
        ]);
    }
}

View:

<div>
    <div class="text-left mb-5">
        <label for="labelSchlagwort" class="font-weight-bold">Schlagwort Suchen:</label>
        <input class="form-control" placeholder="Schlagwort Suchen" type="text" wire:model="searchInput">
    </div>

    @if($searchList->total() > 0)
        {{ $searchList->links() }}
        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th scope="col" class="text-left">Schlagwort</th>
                <th scope="col" class="text-left">Angelegt am</th>
                <th scope="col" class="text-left"></th>
            </tr>
            </thead>
            <tbody>
            @foreach($searchList as $searchedItem)
                <tr>
                    <td class="text-left">{{ $searchedItem->schlagwort }}</td>
                    <td class="text-left">{{ $searchedItem->created_at }}</td>
                    <td class="text-left">
                        <button class="btn btn-success">Editieren</button>
                        <button class="btn btn-danger" wire:click="deleteTags({{ $searchedItem->id }})">Löschen</button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
        {{ $searchList->links() }}
    @endif
</div>

Video:

#2

Just because I never got help in this Forum, I want to post how I got this fixed.

The problem is when you are on a page > 1 you can search but the pagination still thinks you are on another page.

This leads to not having a search result and the pagination showing up when nobody expects it.

Here you have to work with a lifecycle hook in Livewire.

Solution is to reset to page 1 everytime you are searching for something.

<?php

namespace App\Http\Livewire\Tags;

use App\Tag;
use Exception;
use Illuminate\Contracts\View\Factory;
use Illuminate\View\View;
use Livewire\Component;
use Livewire\WithPagination;

class TagEdit extends Component
{
    use WithPagination;

    public $searchInput;
    protected $searchList;
    protected $pagination = 5;

    /**
     * @param $id
     * @throws Exception
     */
    public function deleteTags($id): void
    {
        $deleteID = Tag::findOrFail($id);
        $deleteID->delete();
    }

    public functon updatingSearchInput()
   {
        $this->gotoPage(1);
   }

    /**
     * @return Factory|View
     */
    public function render()
    {
        return view('livewire.tags.tag-edit', [
            'searchList' => Tag::where('schlagwort', 'like', '%' . $this->searchInput . '%')
            ->orderBy('created_at', 'desc')
            ->paginate($this->pagination),
        ]);
    }
}

Take a closer look at the method updatingSearchInput.

1 Like
#3

So as for now i have just utilized the updated hook

public function updating($name, $value)
    {
        //list of Property changes in which that
        //page number needs to be set to 
        //first page

        $changePagintionToOne = [
            'search',
        ];

            if(in_array($name,$changePagintionToOne)):
                $this->gotoPage(1);
            endif;
        return;
    }