Remove ?page from query string

Hi Bobby, thanks for replying.

I tried adding the protected query string property but no luck. The ?page param is still appended 😞

Hey!

Ah yes indeed, I was unable to get that working on my end as well.

Unfortunately I don't see a way to do that when using the paginate method :/

Another option here for the moment would be to build a simple custom pagination method instead. Here is a quick example that I've tested and is working:

• Sample Livewire controller method:

<?php

namespace App\Livewire;

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

class Users extends Component
{
    public $perPage = 1;
    public $currentPage = 1;

    protected $queryString = [];

    public function gotoPage($page)
    {
        $this->currentPage = $page;
        $this->dispatch('pageChanged', $page);
        // Use emit with Livewire v2
    }

    public function previousPage()
    {
        if ($this->currentPage > 1) {
            $this->gotoPage($this->currentPage - 1);
        }
    }

    public function nextPage()
    {
        $this->gotoPage($this->currentPage + 1);
    }

    public function getTotalPages()
    {
        return ceil(User::count() / $this->perPage);
    }

    public function render()
    {
        $totalPages = $this->getTotalPages();
        $offset = ($this->currentPage - 1) * $this->perPage;

        $users = User::skip($offset)
            ->take($this->perPage)
            ->get();

        return view('livewire.users', compact('users', 'totalPages'));
    }
}

• Livewire view:

<div>
    @foreach ($users as $user)
        <div class="flex items-center justify-between p-4 bg-white border-b border-gray-200">
            <div class="flex items">
                <img class="w-10 h-10 rounded-full" src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}">
                <div class="ml-2">
                    <div class="text-sm font-medium text-gray-900">{{ $user->name }}</div>
                    <div class="text-sm text-gray-500">{{ $user->email }}</div>
                </div>
            </div>
        </div>
    @endforeach

    <div class="mt-4">
        <!-- Custom Pagination -->
        <nav class="flex items-center justify-between">
            @if ($currentPage > 1)
                <button
                    wire:click="previousPage"
                    class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50"
                >
                    Previous
                </button>
            @else
                <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-not-allowed">
                    Previous
                </span>
            @endif

            <span class="text-sm text-gray-700">
                Page {{ $currentPage }} of {{ $totalPages }}
            </span>

            @if ($currentPage < $totalPages)
                <button
                    wire:click="nextPage"
                    class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50"
                >
                    Next
                </button>
            @else
                <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-not-allowed">
                    Next
                </span>
            @endif
        </nav>
    </div>
</div>

<script>
document.addEventListener('livewire:load', function () {
    Livewire.on('pageChanged', function (page) {
        const url = new URL(window.location.href);
        url.hash = `#/dashboard`;
        history.pushState(null, '', url.toString());
    });
});
</script>

You can also consider raising a feature request on the Livewire repo to ask for the pagination query parameter to be configurable so it could possibly be disabled with just a flag.

Let me know how it goes!

Best,

Bobby

Hi Bobby. Sorry for the late reply, I got caught up with other things. Thank you for all the help. Your first reply worked, and it disable ?page from the query string.

I made a mistake and used the default Laravel paginator markup which had a tags for the previous and next buttons. I changed the a tags to use href='#' and added wire:click for the Next and Previous buttons. However, this caused the Angular app to browse to the home page http://demo.happykids.test/admin?page=2#/dashboard. I then changed the a tags to buttons and I'm happy to report that it's working as expected 🙌 🥳

Hey!

Awesome! Happy to hear that it is all working!

Good luck with your project 👏

- Bobby