Unable to get the Laravel pagination properly

Question

I am trying to access product data from api controller and display in blade page. I am getting the data but my pagination not directing to proper page and not working properly.

my ProductApiController

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Product;

class ProductApiController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $products = Product::select("*")->where('active_flag','Y')->paginate(10);
        return response()->json($products);
    }
....

api routing file

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Api\ProductApiController;

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get('/products',[ProductApiController::class, 'index']);

my product.blade

.......
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            loadProducts();
        });

        function loadProducts() {
            $.ajax({
                url: '/api/products',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    displayProducts(response);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }

        function displayProducts(products) {
            var productHtml = '';

            $.each(products.data, function(index, product) {
                productHtml += '<div class="w-full max-w-sm mx-auto overflow-hidden rounded-md shadow-md">';
                productHtml += '<img src="'+product.product_pic+'" alt="" class="w-full max-h-60">';
                productHtml += '<div class="flex items-end justify-end w-full bg-cover"></div>';
                productHtml += '<div class="px-5 py-3">';
                productHtml += '<h3 class="text-gray-700 uppercase">'+product.product_name+'</h3>';
                productHtml += '<span class="mt-2 text-gray-500">'+product.product_price+'</span>';
                productHtml += '<form action="/addtocart" method="POST">';
                productHtml += '@csrf';
                productHtml += '<input type="hidden" value="'+product.product_id+'" name="product_id">';
                productHtml += '<button class="px-4 py-2 text-white bg-blue-800 rounded">Add To Cart</button>';
                productHtml += '</form>';
                productHtml += '</div>';
                productHtml += '</div>';
                
                // Add more HTML markup to display other product details
            });

            productHtml += '<a href="'+product.next_page_url+'">Next</a>';

            $('#product-list').html(productHtml);
        }
    </script>
.....

But this line

productHtml += '<a href="'+product.next_page_url+'">Next</a>';

shows as http://127.0.0.1:8000/api/products?page=2. But I want to redirect to products page and load next set of data. Please help me to get that done. Thanks

Answer 1

Just make an ajax request to this URL (/api/products?page=2), and you will get data of next page. Laravel will automatically handle page query param

Answer 2

As @lezhni explained I modified loadProducts() function as below

function loadProducts(pageNo) {
            var urlLink = '';
            if(pageNo == 1){
                urlLink = '/api/products';
            }else{
                urlLink = '/api/products?page='+pageNo;
            }

            $.ajax({
                url: urlLink,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    displayProducts(response);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }