Pagination Page Reset By Changing Filters (Is One Character Behind)

Level 29

Does this only happen when you update the searchTerm or also when you update other filters like for example sortField?

Level 1

@gyc I'm sorry for misleading information. I checked it again and unfortunately all inputs are same. I tought its only for search but it seems: when others are not set for the first time, wont affect the page change. they have to be in query present (set one time) so they can reset the page

Level 29

@emmatraversy No problem :) Can you share you back end controller method that handles the search ?

Level 1

@gych yeah, ofcourse: I haven't code the date range filter yet.

<?php

namespace App\Http\Controllers\TestingHub;

use Inertia\Inertia;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Request;


use App\Models\User;

class UserController extends Controller
{
    public function index()
    {
        $searchFields = ['name', 'email'];
        $searchField = in_array(Request::input('searchField'), $searchFields) ? Request::input('searchField') : $searchFields[0];
        
        // Parse sort parameter
        $sortFields = ['name', 'email'];
        $sortField = in_array(Request::input('sortBy'), $sortFields) ? Request::input('sortBy') : null;
        $sortDirection = in_array(Request::input('dir', 'asc'), ['asc','desc']) ? Request::input('dir', 'asc') : 'asc';

        /** @disregard P1013 method exists but intelephense cant see it */
        $users = User::query()
            ->when(Request::input('search'), function ($query, $search) use ($searchField) {
                $query->where($searchField, 'like', "%{$search}%");
            })
            ->when($sortField, function ($query, $sortField) use ($sortDirection) {
                $query->orderBy($sortField, $sortDirection);
            })
            ->paginate(10)->withQueryString();
    
        $filters = Request::only(['page','search','searchField','sortBy','dir','date']);
        return Inertia::render('Users/Index', [
            'users' => $users,
            'filters' => $filters,
        ]);
    }
}

Level 1

@gych yeah, ofcourse: I haven't code the date range filter yet.

<?php

namespace App\Http\Controllers\TestingHub;

use Inertia\Inertia;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Request;


use App\Models\User;

class UserController extends Controller
{
    public function index()
    {
        $searchFields = ['name', 'email'];
        $searchField = in_array(Request::input('searchField'), $searchFields) ? Request::input('searchField') : $searchFields[0];
        
        // Parse sort parameter
        $sortFields = ['name', 'email'];
        $sortField = in_array(Request::input('sortBy'), $sortFields) ? Request::input('sortBy') : null;
        $sortDirection = in_array(Request::input('dir', 'asc'), ['asc','desc']) ? Request::input('dir', 'asc') : 'asc';

        /** @disregard P1013 method exists but intelephense cant see it */
        $users = User::query()
            ->when(Request::input('search'), function ($query, $search) use ($searchField) {
                $query->where($searchField, 'like', "%{$search}%");
            })
            ->when($sortField, function ($query, $sortField) use ($sortDirection) {
                $query->orderBy($sortField, $sortDirection);
            })
            ->paginate(10)->withQueryString();
    
        $filters = Request::only(['page','search','searchField','sortBy','dir','date']);
        return Inertia::render('Users/Index', [
            'users' => $users,
            'filters' => $filters,
        ]);
    }
}

shariff

Level 50

Did you try appending query params?

->paginate(10)->appends(request()->query());

Level 1

@shariff Thank you for your reply I suppose ->withQueryString(); do the same thing.

Unfortunetly problem is on the frontend part I guess. When it can't detect a filter change when it is not assigned once.

1 like

Level 1

@gych The problem is here: I put the console logs

    const filtersChanged = Object.keys(filters).some(
      (key) => {
        console.log(`Checking filter ${key}`);
        const filterChanged = key !== 'page' && (
          !queryParams.hasOwnProperty(key) || // Filter doesn't exist in queryParams
          filters[key] !== queryParams[key] // Filter value has changed
        );
        console.log(`Filter ${key} changed: ${filterChanged}`);
        return filterChanged;
      }
    );

it only checks "page" filter not other keys because they don't exist yet there is nothing for him to check

and also checking filters seem a little wrong since its assigned serverside. I think I should do something in that useEffect (or search function) but rely on other thing than filters because filter will set after the router request, I dont know how to explain my tought sorry

Best Answer

Level 29

@emmatraversy I personally always use ->appends() with a different approach which doesn't require me to reset the page in the front end.

Add this to set which page to use in the pagination, if there's not page in the request use 1 as default.

$page = $request->page ?? 1;

Then with paginate use this

->paginate(10, ['*'], 'page', $page)->appends(['search', 'searchField', 'sortBy', 'dir', 'date']);

Level 1

@gych Thank you for your reply. Sorry for the delay. I had an unexpected health issue arise a couple of weeks ago that required me to be hospitalized for a few days.

Thanks for your kind replies and help. It seems this approach will fix my problem, I'll give that a shot then.

Best Regards