Pagination, Filtering, and Sorting
In this series we will cover how to add:
- Pagination (limit, and offset)
- Sorting
- Filtering
And we will add this to a Symfony 3 project, whether this is a traditional Symfony project using Twig, or a via using Symfony as a RESTful API. We will cover both.
As you will see, it doesn't matter whether we use Twig or output JSON, the underlying paginator uses the same implementation.
Which is pretty nice.
Once we have seen how we can add Pagination, Filtering, and Sorting in Twig and tested via Postman client with our RESTful API, we will then implement Pagination, Filtering, and Sorting into Angular 1.5, and React 15.2.
Now, one point to be aware of here:
We are implementing Pagination, Filtering, and Sorting on the server side.
There isn't any other way to do this with Twig.
But with our API, we could - in theory - choose to do this on the client side. It all depends on your circumstances.
However, most implementations tend towards server side - in my experience, at least. If you think about it, it does make sense:
Let's say we have a database with 1000 records in it. We have a LAN connection to a server that runs in a cupboard somewhere in the back of the office. It's a hot cupboard, poorly ventilated, and the 'server' is really an old Compaq desktop that was the secretary's PC two refresh cycles ago. But hey, it works.
Anyway, if we have a small amount of data and a very fast connection to the server then chances are you can get away with Pagination, Filtering, and Sorting on the client side. This is to say, you could feasibly pull down the full data set and map, filter, and reduce the data down in JavaScript without many issues. Heck, the server would likely even thank you for it.
But back in the modern world with our Amazon EC2 x1.32xlarge mega uber boxes, we likely don't want to make our end users pull down all 3 million rows over their 56k modem. No sir. Besides, with a computer so powerful, it would be a shame not to make it work its little socks off.
In our case we will do the processing server side.
This means Angular and React won't have to do very much. There's still 'stuff' they will do - plugging the data into pagination components, dynamically updating and re-running the query string, and so on, but the heavy lifting will be done using Symfony.
If you're still unsure then no worries, in the very first video we will cover a demo of what the project will look like in Twig.
The thing with Twig is - when you click on page 2, page 3, page 10... etc, or you sort the results, or your filter the results... or pretty much anything, you have to do a full page refresh. This works, but feels a little 1999.
By the end of this series we will have covered how to re-implement this same functionality but using Angular 1.5, and / or React JS (15.2).
If you haven't already done so, I would recommend completing this course - or having a similar level of knowledge - before starting this course. We will use the code from that course as the starting point for this course.
I hope you find it useful.
