Customizing pagination for Inertia (React)

Ok, so the docs are pretty clear on this topic (for the most part)

https://laravel.com/docs/8.x/pagination#customizing-the-pagination-view

So the examples given there (above the artisan vendor:publish command, which I ran), appears to be code that you would include in your blade component. That's all well and good except that with Inertia (I'm using react), you can't really pull in a view when you are trying to print out the links.

So I'm thinking there must be an alternative solution. Then it occurs to me that Laravel, behind the scenes, must already "rendering" the pagination before I even get it. Right? I mean, when I render out the previous and next links, I'm seeing « Previous and Next ». That text is from coming from the pagination.php config file. So something is doing it.

Digging down more, I see in AbstractPaginator the default view is set to public static $defaultView = 'pagination::tailwind';. When I ran that vendor:publish command above, I see that it created a views/vendor/pagination directory containing a bunch of files. Two of those files are tailwind.blade.php and simple-tailwind.blade.php and each seems to correspond with the default values of the properties defined in AbstractPaginator.

Now, just to test, I removed the entire contents of each and replaced it with "Hello" and "Hello Simple" but when I reloaded the page, the links were the same -- as if the pagination process didn't even bother with those templates.

Basically, I'm not sure what to do or where to go now. Eloquent\Builder::paginate looks like it should be taking that view template into account but it just isn't. Is there a way to get it so that the paginator uses one of those templates as it builds the pagination links? So that I can have the new format available to me when I render them in my React component on the front end?

Thanks!

Christoph

tykus

4 years ago

Best Answer

Level 104

Then it occurs to me that Laravel, behind the scenes, must already "rendering" the pagination before I even get it.

You're on your own as far as rendering; the JSON representation of the the LengthAwarePaginator instance is like this:

{
  "current_page": 1,
  "data": [],
  "first_page_url": "https:\/\/domain.dev?page=1",
  "from": 1,
  "last_page": 4,
  "last_page_url": "https:\/\/domain.dev?page=4",
  "links": [
    {
      "url": null,
      "label": "&laquo; Previous",
      "active": false
    },
    {
      "url": "https:\/\/domain.dev?page=1",
      "label": "1",
      "active": true
    },
    {
      "url": "https:\/\/domain.dev?page=2",
      "label": "2",
      "active": false
    },
    {
      "url": "https:\/\/domain.dev?page=3",
      "label": "3",
      "active": false
    },
    {
      "url": "https:\/\/domain.dev?page=4",
      "label": "4",
      "active": false
    },
    {
      "url": "https:\/\/domain.dev?page=2",
      "label": "Next &raquo;",
      "active": false
    }
  ],
  "next_page_url": "https:\/\/domain.dev?page=2",
  "path": "https:\/\/domain.dev",
  "per_page": 5,
  "prev_page_url": null,
  "to": 5,
  "total": 17
}

As you can see there is information available to you to create a links to the various pages and display the number of results etc. In your React app, you can create a Pagination component to consume this data; iterating over the links to render the page number links and using the active state to show the current page.

_christoph

4 years ago

Level 7

@tykus Yeah, I saw that and I was working with it. The main thing I wanted to do was change the Previous and Next markup because react doesn't see it that way and instead processes it as raw text. I guess in my paginator I'll just need to make a case for each and render them differently.

Thanks for your input!

Please or to participate in this conversation.