Angular-datatables with server side pagination
All you need to get pagination and sorting with server-side processing to handle large data sets
We are using angular-datatables in a project. So far, we just returned all entities from the server’s REST controller (Using Spring Boot and Spring Data on the server side). I wanted to see how I could implement server side pagination to avoid returning all records at once.
I was lucky to find spring-data-jpa-datatables which makes it very easy to do.
First, add the dependency in your pom.xml:
In my UserController, I currently have this:
I added a new method that would be used for the server side pagination and searching (I could have replaced the old method as well, as it will no longer be used):
To support this controller, you need to update the UserRepository to extend from DataTablesRepository, so change this:
On the client side, I had this code:
This code now changes to:
The most important things are:
- Set the contentType so that we send JSON to the REST controller
- Set the url that points to our new controller method
- Set the type to POST since we accept a POST in the controller
- Add a beforeSend function to set the Authorization header so we can access the controller method that is secured with Spring Security
- Add a data function to return the data object as JSON
One thing I had to do additionally is this line:
After all this, you can check in the developer console to the requests and responses, only the actual needed data will be returned from the server. The search box will work and also the sorting will work.
What is also very nice is that the pagination adapts perfectly. And when you start to search, it also shows this in the footer:
Showing 1 to 1 of 1 entries (filtered from 24 total entries)
And that is all you need to get pagination and sorting with server-side processing to handle large data sets using AngularJS, Datatables and Spring.
post by Wim Deblauwe