How to use DataTable with Spring Boot for Server Side Processing

If you have worked on web development projects that deals with thousands of records getting displayed on page then you must have worked with or heard of Datatables. It is a JQuery plugin which is highly flexible and adds interactive controls to any HTML table. These tables serve great purpose when it comes to display huge information in tabular form. When you have a task to work with huge data its not advised to pull all the data to client side first and then use datatables to display.

In this scenario we need to do the processing at server side and send only relevant records back for display. In this article we will see example of this functionality. You will get a wrapper around this functionality so the integration becomes easy.

Software used for this example

  • Java 1.8
  • Spring Boot 1.5.1.RELEASE
  • JQuery
  • DataTable 1.10.12
  • MySQL
  • Eclipse IDE

When we use server side option of datatable we need to prepare data as per the datatable specification and send in JSON format. In this example you will find many such wrapper classes that will help us to prepare pagination, sorting, filtering data.

Project Structure

SpringBoot - Datatable Project Structure
When we specify data for any column on datatable we need to specify the data, name, searchable etc. fields. Below class holds all that data and we also have a method which processes HTTP request object and prepares the specification for each of the column.

After this we have another main class that holds data for complete datatable interaction including draw, search, start, end of data. It will also hold the list of above specification class for each column.

You can see that constructor is calling another method which will process the http request and prepare complete datatable request. At the same time it has methods to prepare supporting information required for sorting, filtering and pagination is prepared.

The Controller

As this is a web project, we will add a controller that will display our data. We are using the Thymeleaf along with Spring Boot to server our web content.

In above you can see when request comes to this controller, datatable request and pagination criteria that we need to pass to our data layer is prepared. After that using the pagination criteria which may contain sorting, filtering information a query is prepared and sent to execution for data. Below are both the queries base query and the one which gets prepared using the pagination information.

Once results are back, datatable results is prepared which will have information about total records, filtered records and actual data. This information is then converted to JSON and passed back to client. Below is our User model, the data that get fetched and passed.

The View

Now we will see how we have our html and java script put together. In html we need to put below js and css files in order to use datatable functionality

And after the we will initialize the datatable as shown below

Demo of Datatable

We are done with the code and config. Lets see it working.

Default Rendering

Datatable - Demo 1

FilteringDatatable - Demo 2

SortingDatatable - Demo 3

I hope this example and walk through will help you. You can download the source code and supporting sql from our GitHub

GitHub-Mark-64px

2 Comments
  1. Leandro S.
    May 11, 2017 | Reply
  2. Leandro S.
    May 11, 2017 | Reply

Add a Comment

Your email address will not be published. Required fields are marked *