Curious how pagination is working "under the hood" for dynamic page loading

#1

I’m attempting to recreate similar fetch/loading as WithPagination where livewire seemingly sends an ajax request, grabs the html, and places it on page. It all seems like magic and I was wondering if anyone knows how it’s executing it behind the scenes.

I’ve looked at the code and it looks like the wire:click just changes the public page number on the WithPagination trait. What’s picking up the change and then executing from there? Is it javascript listening somewhere?

Thanks in advance for the help. I’m happy to keep digging into the code if anyone can give me any pointers.

#2

Livewire isn’t really doing anything special, it’s just adding a few things in to make it play nicely with Laravel’s built in pagination. It swaps out the paginator links view so they are livewire onclick links and sets the page number for you. Basically all stuff that’s easy enough to do on your own, but don’t have to worry about it if you pull in the withPagination trait.

When you return Model::paginate(), you are getting an instance of a
Illuminate\Pagination\LengthAwarePaginator, or you manually set it up
https://laravel.com/docs/7.x/pagination#manually-creating-a-paginator (what livewire is doing for you).

Maybe I don’t understand your question, but what I think you are looking for is what magic is Laravel using to paginate.

#3

Hey Dale, thanks for the insight! I’m not really concerned about the specific Pagination mechanism. I just wanted to know how it’s fetching the data from the back end and loading it into the front end. Is there a specific trigger within livewire that’s picking up an event or something and loading the HTML? I just used the Pagination as an example of the behavior I wanted to emulate.

More simply, I just wanted a button that will load html into another component without reloading the entire page. I think I have it accomplished with emit and listeners on the other component. I think I just needed to talk it out a little bit.

Again, thanks for the help!

#4

In the most general of terms, research server side partials and dom diffing/swapping. In essence, that’s mainly what livewire is with a bunch of sugar on top, and it handles ajax routes for you so you don’t have to register every damn one of them.

The simple workflow is you have a route that returns a view,

  • you hit that route with an ajax request in javascript
  • do the logic of what needs changed
  • compile the view and parse it to html
  • html returned to js as the response of the ajax request
  • the inner section of that original dom node is removed (you need a constant wrapper to keep track of it)
  • the response is injected in to replace it

It’s a common enough of a technique that there are tons of js packages out there to do more advanced or smarter stuff, but it’s also really easy to accomplish with vanilla js, and I hate working with js.

As for exactly how livewire does it, you would have to dig into the js side of the code which I have never done. Supposedly it makes use of a package that intelligently only swaps out parts of the dom that were actually changed, but I can’t verify that.