DEV Community

Cover image for Laravel Vue Paginator Conflict
Jonathon Ringeisen
Jonathon Ringeisen

Posted on

1

Laravel Vue Paginator Conflict

I recently implemented pagination into my Laravel Vue production website and I noticed an issue after implementing it. The initial query string that would load all the paginated data was as follow:

https://localhost.com?search=?year=2020

Then, when I would click the next page button the query string would look like this:

https://localhost.com?page=1

Can you see the issue here? The results now reflect all years because it's not including the query string on the paginated results. So....how do we fix this? It's actually pretty simple. Here is what the query string looked like on the back end prior to the fix:

Wrong

/**
     * Display a listing of the resource.
     *
     * @param Request $request
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        if ($request->ajax()) {
            return new IncomeResource($request->user()->incomes()
                ->where(function($query) use ($request) {
                    $query->where('name', 'like', "%{$request->search}%")
                        ->orWhere('amount', 'like', "%{$request->search}%")
                        ->orWhere('notes', 'like', "%{$request->search}%")
                        ->orWhereHas('client', function ($query) use ($request) {
                            $query->where('clients_name', 'like', "%{$request->search}%");
                        });
                })
                ->whereYear('date_income_received', 'like', "%{$request->year}%")
                ->with('client.sessions')
                ->orderBy('date_income_received', 'desc')
                ->paginate(10);
           )
        }      
    }
Enter fullscreen mode Exit fullscreen mode

Right

/**
     * Display a listing of the resource.
     *
     * @param Request $request
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        if ($request->ajax()) {
            $paginator = $request->user()->incomes()
                ->where(function($query) use ($request) {
                    $query->where('name', 'like', "%{$request->search}%")
                        ->orWhere('amount', 'like', "%{$request->search}%")
                        ->orWhere('notes', 'like', "%{$request->search}%")
                        ->orWhereHas('client', function ($query) use ($request) {
                            $query->where('clients_name', 'like', "%{$request->search}%");
                        });
                })
                ->whereYear('date_income_received', 'like', "%{$request->year}%")
                ->with('client.sessions')
                ->orderBy('date_income_received', 'desc')
                ->paginate(10);

            $paginator->appends([
                'search' => $request->search,
                'year' => $request->year
            ]);

            return new IncomesResource($paginator);
        }      
    }
Enter fullscreen mode Exit fullscreen mode

Laravel paginator has an appends method which you can use to append any query string data onto the URLs. By doing this it automatically adds the query string to the links for me which apply those query strings each time I click the next or previous button.

Enjoy! I hope that helps someone else from this headache.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay