skip to Main Content

My response looks like this:

"links": {
    "first": "http://localhost:8000/api/tasks?page=1",
    "last": "http://localhost:8000/api/tasks?page=200",
    "prev": null,
    "next": "http://localhost:8000/api/tasks?page=2"
},
"meta": {
    "current_page": 1,
    "from": 1,
    "last_page": 200,
    "links": [
        {
            "url": null,
            "label": "« Previous",
            "active": false
        },
        {
            "url": "http://localhost:8000/api/tasks?page=1",
            "label": "1",
            "active": true
        },
        {
            "url": "http://localhost:8000/api/tasks?page=2",
            "label": "2",
            "active": false
        },
        {
            "url": "http://localhost:8000/api/tasks?page=3",
            "label": "3",
            "active": false
        },
        {
            "url": "http://localhost:8000/api/tasks?page=4",
            "label": "4",
            "active": false
        },
        {
            "url": "http://localhost:8000/api/tasks?page=5",
            "label": "5",
            "active": false
        },
        {
            "url": "http://localhost:8000/api/tasks?page=6",
            "label": "6",
            "active": false
        },
        {
            "url": "http://localhost:8000/api/tasks?page=7",
            "label": "7",
            "active": false
        },
        {
            "url": "http://localhost:8000/api/tasks?page=8",
            "label": "8",
            "active": false
        },
        {
            "url": "http://localhost:8000/api/tasks?page=9",
            "label": "9",
            "active": false
        },
        {
            "url": "http://localhost:8000/api/tasks?page=10",
            "label": "10",
            "active": false
        },
        {
            "url": null,
            "label": "...",
            "active": false
        },
        {
            "url": "http://localhost:8000/api/tasks?page=199",
            "label": "199",
            "active": false
        },
        {
            "url": "http://localhost:8000/api/tasks?page=200",
            "label": "200",
            "active": false
        },
        {
            "url": "http://localhost:8000/api/tasks?page=2",
            "label": "Next »",
            "active": false
        }
    ],
    "path": "http://localhost:8000/api/tasks",
    "per_page": 2,
    "to": 2,
    "total": 400
}

I can make use of the first links, and just use those, but I still want to have the numbered links, as Laravel gives them back, meaning: goes from 1 to 10, has a "…" link, then some from the last links.

Is there a way to do that on the API? I don’t want to splice the first and last links all the time on the frontend and so-far, that’s the only suggested solution I’ve found.

Or if there’s a way to just return the numbered links as I mentioned above, that would be amazing too!

Edit:
I tried the boot method suggestion, this is how it looks:

<?php

namespace AppProviders;

use IlluminateSupportServiceProvider;
use IlluminateHttpResourcesJsonJsonResource;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        JsonResource::macro('paginationInformation', function ($request, $paginated, $default) {
            // change it however you want...
            unset($default['links']['prev']);
            unset($default['links']['next']);

            return $default;
        });
    }
}

and then my resource:

<?php

namespace AppHttpResources;

use IlluminateHttpRequest;
use IlluminateHttpResourcesJsonJsonResource;

class TaskResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @return array<string, mixed>
     */
    public function toArray(Request $request): array
    {
        return [ ... returning my stuff ... ]

But it still includes the prev-next links, so they’re not unset.
I also tried modifying it to $default['meta']['links']['prev'] and next, but that didn’t solve it either.

2

Answers


  1. Chosen as BEST ANSWER

    The final solution turned out to use "DataTables". That, and a "custom" combination of returning the data and the total. With that, DataTables handles the pagination completely, while the laravel API returns only what is requested.

    Something similar:

    https://datatables.net/examples/data_sources/ajax


  2. Using API resources you can modify this creating a macro on JsonResource in your AppServiceProvider’s boot method

    use IlluminateHttpResourcesJsonJsonResource;
    
    JsonResource::macro('paginationInformation', function ($request, $paginated, $default) {
        // change it however you want...
        array_shift($default['meta']['links']); 
        array_pop($default['meta']['links']); 
    
        return $default;
    });
    

    Had to sourcedive to find this
    https://github.com/laravel/framework/blob/0c574d42e9c7d82a0bd304a5cb2ce031a914bfa6/src/Illuminate/Http/Resources/Json/PaginatedResourceResponse.php#L53

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search