The pagination feature in Algolia instantsearch fails to display the results from the second page

While working with Laravel Vue and Algolia, I encountered an issue with pagination. The pagination seems to be functioning, but only the first page result is displayed. Clicking on pages 2, 3, etc. does not fetch the next page's results. Below are the steps I have taken:

SearchController.php

public function search(Request $request)
{
    $error = ['error' => 'No results found, please try with different keywords.'];

    if($request->has('q')) {
        $movies = Movie::search($request->get('q'))->get();
        return $movies ? $movies : $error;
    }

    return $error;
}

Pagination.js

var search = instantsearch({
    appId: 'myid',
    apiKey: 'mykey',
    indexName: 'myindex',
    urlSync: true
});

search.addWidget(
    instantsearch.widgets.pagination({
      container: '#pagination-container',
      maxPages: 20,
      scrollTo: false
    })
);

search.start();

Answer №1

To ensure the frontend receives the correct page, consider utilizing the paginate method.

public function search(Request $request)
{
    $error = ['error' => 'No matching results found. Please try using different keywords.'];

    if($request->has('q')) {
        $movies = Movie::search($request->get('q'))->paginate(20)->all();
        return $movies ? $movies : $error;
    }

    return $error;
}

If necessary, you can specify the page number explicitly like so:

Movie::search($request->get('q'))->paginate(20, 'page', 3)->all();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Launching a Material-UI dialog box from a higher-level Header component

I have a setup where the header component is separate from the Register dialog modal component, functioning as parent and child components. My goal is to trigger the Register dialog (child) from the headerlink component (parent) Here is the code for my he ...

JavaScript encountered an issue: Uncaught ReferenceError - 'userNumber' is undefined at line 43

I'm currently working on a JavaScript guessing game where I've already set up the necessary functions. However, I keep encountering an error. An error in my JavaScript code is causing a ReferenceError: userNumber is not defined on line 43 to b ...

JavaScript window.open not opening new window

Hey there, I'm currently working on logging into Twitter. Unfortunately, the window is not opening as expected in this code snippet. The response that is alerted isn't null and seems to be a link to a login screen. Any thoughts or suggestions on ...

Choose the default text option for your AngularJS dropdown menu

I am facing an issue with my angularjs dropdownlist that is using ng-options. <select ng-options="perlocation.name for perlocation in locations" ng-model="locationDropdown"> Even though my dropdown list loads correctly, the selected option 0 is dis ...

Can you explain the concept of a framework operating "on top of" node.js in a way that would be easy for a beginner to understand?

If someone is new to JavaScript, how would you explain the concept of "on top of node.js" in simple programming language? I am looking for a general explanation as well as specific reference to Express on top of node.js in the MEAN stack. Appreciate your ...

The v-model for two-way binding seems to be malfunctioning, with a browser error or warning stating that the use of withDirectives is restricted to render functions

Currently utilizing VITE v5.0.8. This file is dex.html <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content=&q ...

Unusual limitation in jQuery/ASP.NET WebForms for text area character count

Utilizing www.lipsum.com to produce 2,000 characters, verifying the character count within the word and ensuring there are exactly 2,000 characters. Within ASP WebForms, I have the subsequent control: <asp:textbox runat="server" ID="txtComment" rows=" ...

Issue encountered while utilizing JQueryUI alongside TypeScript and the definition file from DefinitelyTyped

Currently, I'm attempting to incorporate JQueryUI with TypeScript by first installing JQueryUI using npm install jquery-ui-dist, and then installing JQuery with npm install jquery. Additionally, I have included the definition files from DefinitelyType ...

Error: The prop type validation failed because a `value` prop was provided to a form field in React-Bootstrap-Typehead component

I am currently using the bootstrap-typehead package from https://github.com/ericgio/react-bootstrap-typeahead and struggling to understand why it's causing issues. Could someone help me identify what's wrong with this code that's triggering ...

Cleaning up unwanted objects in THREE.js webGL

Our app utilizes THREE.js to showcase 3D body meshes. We have a special object named MeshViewer that manages the rendering process; within the initialize method, we establish this.renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBu ...

Make object calculations easy with the power of JavaScript

I've stored a JSON object in a variable and I'm performing calculations based on its properties. However, the current method of calculation seems lengthy, especially as the data grows larger. I'm searching for a more concise approach to per ...

Stop the bootstrap accordion from expanding when a button in its header is clicked

Currently, I am facing an issue with two action buttons located in the header of an accordion. Here is the setup: https://i.sstatic.net/HU2Kp.png Whenever I click on one of these buttons, it toggles the accordion's state. I have attempted to use e.p ...

Incorporating a stationary navigation bar alongside a parallax scrolling layout

After spending the entire night trying to figure this out, I have had zero success so far. I decided to tackle this issue with javascript since my attempts with CSS have been completely fruitless. This is a demonstration of the parallax scrolling webpage. ...

Tips for achieving an eye-catching text and image layout on a single page of your Wordpress blog

I've been exploring ways to achieve a design concept for my blog layout. I envision having the text and thumbnail displayed side by side, each taking up 50% of the width until the image reaches its end. Once the image ends, I want the text to span the ...

How can you choose multiple options in a Select2 dropdown when it first loads?

I'm having trouble correctly loading a JSON array of selected items into an existing select2 dropdown. I want certain items to be pre-selected when the page loads, but I'm struggling with the syntax. Consider the following JSON array, stored in ...

How come Vue is returning a false value for my v-if condition even though it should be true?

After running this code, I noticed that Vue is displaying the second template even though the value of groups.length is 1. Why is this happening? Could it be related to the sequence in which mounting occurs and v-if is evaluated? I can confirm that the v ...

Refresh information in form after submitting with Remix

Currently, I am utilizing the Remix Form element to display my form with various input fields. When there is a server-side validation error, the entered text in the fields remains, as expected. However, upon successful submission of the form, I would like ...

Connecting a Package as a Lerna Package Dependency during Development Journey

In my project, the structure is organized as shown below: packages/ client/ package.json server/ package.json shared/ package.json lerna.json package.json The client's package.json file includes the following depen ...

Display the Bootstrap datepicker within an h4 element set to default to today's date, utilizing both Angular and jQuery

Utilizing Boostrap datepicker to obtain the selected date from the calendar and insert it into an <h4> html tag. However, my goal is to display today's date by default in the h4 when it opens for the first time. Using angular.js + jquery f ...

Firebase Hosting integrated with Cloud Functions

Struggling with deploying my functions and hosting. While I have managed to get them working separately on different branches, integrating both hosting and cloud functions is proving to be a challenge. It seems like my cloud function is not deploying succ ...