galaners's avatar

Remove Pagination Page Value When Using Filters

I've a basic CRUD where you can search by some typing value or selecting some category. The issue here is that after selecting some page (I use pagination for the records) and then select a category, the page value remains while the filter is on, so, if the number of records of the category is much fewer than without it, the page will cause that the manager can't see any record, because there'll be not enough to fulfill the number of pages of the pagination.

Lets say, without selecting any category I've 65 records, so I click on the 5 page (every page has 10 records) to see the 51-60 records. Then I apply a filter where the number of records I receive are 24, but because I'm on the 5 page, I can't see any record, because there are only 3 pages.

I'm aware I can remove the "?page=" attribute from the URL everytime I select a category or input a value in the search input field, but I'm looking if there's a more elegant way to solve it:

Filters Inputs:

<form>
    <div>
        <button type="submit">
            <svg>(...some search icon)</svg>
        </button>
        <input name="search" type="search" wire:model.debounce.500ms="search">
    </div>
    <div>
        <x-jet-label for="department" value="Departamento" />
        <select
            class="category_filter" wire:model="category"
            id="category" name="category">
            <option value="" selected>(All)</option>
            @foreach ($categories as $category)
                (...categories options)
            @endforeach
        </select>
    </div>
</form>

Controller:

(...all libraries, modules, referencies, etc.)

class MyController...
{

    use WithPagination;
    protected $paginationTheme = 'bootstrap';

    protected $queryString = [
        'search' => ['except' => ''],
        'category' => ['except' => '']
    ];

    public function render()
    {
        $myRecords = SomeTable::select(...)->paginate(8);
        return view('myView', compact('myRecords'));
    }

}

URLS:

Before Selecting a Page: http://localhost/myView

After Selecting a Page and Before Selecting a Category: http://localhost/myView?page=10

After Selecting a Category: http://localhost/myView?page=10&category=7

0 likes
3 replies
newbie360's avatar
Level 24

@galaners may be something like this

public $search = '';
public $category;

public function updatedSearch()
{
    $this->resetPage();
}

public function updatedCategory()
{
    $this->resetPage();
}
1 like
galaners's avatar

@newbie360 I updated the front to:

<form>
    <div>
        <button type="submit">
            <svg>(...some search icon)</svg>
        </button>
        <input name="search" type="search" wire:model.debounce.500ms="search" wire:change="refreshPagination">
    </div>
    <div>
        <x-jet-label for="department" value="Departamento" />
        <select
            class="category_filter" wire:model="category" wire:change="refreshPagination"
            id="category" name="category">
            <option value="" selected>(All)</option>
            @foreach ($categories as $category)
                (...categories options)
            @endforeach
        </select>
    </div>
</form>

and added this function to the controller:

public function refreshPagination() {
        $this->resetPage();
}

Please or to participate in this conversation.