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


  1. Wallace
    June 13, 2018 | Reply
    • Pavan
      June 14, 2018 | Reply
  2. Antoine
    June 6, 2018 | Reply
    • Pavan
      June 8, 2018 | Reply
  3. jahurul islam
    May 21, 2018 | Reply
  4. Antoine
    April 18, 2018 | Reply
    • Pavan
      April 18, 2018 | Reply
      • Antoine
        June 6, 2018 | Reply
  5. Yoyo
    March 14, 2018 | Reply
  6. Marc Collin
    March 12, 2018 | Reply
    • Pavan
      March 13, 2018 | Reply
  7. Vinodh
    February 16, 2018 | Reply
    • Pavan
      February 16, 2018 | Reply
  8. Sandeep
    February 12, 2018 | Reply
    • Pavan
      February 14, 2018 | Reply
  9. Ajinkya Shinde
    January 30, 2018 | Reply
  10. November 15, 2017 | Reply
    • Pavan
      November 16, 2017 | Reply
  11. Rajeshkumar
    November 15, 2017 | Reply
  12. Frank
    November 8, 2017 | Reply
    • Frank
      November 8, 2017 | Reply
      • Pavan
        November 8, 2017 | Reply
  13. Rizwana
    October 26, 2017 | Reply
    • Pavan
      October 26, 2017 | Reply
      • Rizwana
        October 27, 2017 | Reply
  14. August 8, 2017 | Reply
    • Pavan
      August 9, 2017 | Reply
      • August 9, 2017 | Reply
        • Yoyo
          March 14, 2018 | Reply
  15. techsavvyprog
    July 15, 2017 | Reply
  16. Leandro S.
    May 11, 2017 | Reply
  17. Leandro S.
    May 11, 2017 | Reply

Leave a Reply to Sandeep Cancel reply

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