The spring-data-jpa-datatables maven dependency is required to integrate DataTables into spring web application or spring boot application. Jquery datatable server side pagination, searching and sorting works very well with spring boot, spring mvc using jsp or thymeleaf. Datatable Spring boot integration example can be extended further to make them editable datatables using x-editable.
spring-data-jpa-datatables maven dependency
The spring-data-jpa-datatables is an extension of the Spring Data JPA project to ease the usage of jQuery DataTables with server side processing enabled. This will allow you to handle the Ajax requests sent by DataTables for each draw of the information on the page (i.e. when paging, ordering, searching, etc.) from Spring @RestController.
Usage of spring-data-jpa-datatables
A Spring Web Application developer always looks for loading the server side data. Most repetitive work is to create the listing view where developer has to show listing, add filters, sorting and pagination. On the other hand, if we look on DataTables which already had such features sorting, searching, pagination etc , which adds advanced interaction controls to your HTML tables the free & easy way.
So we will see now how to cover the gap here. Using DataTables Ajax option for server side loading will do the work but its not enough. For frontend as well as backend we need something to minimize development efforts, so we can use datatables in java. We will use Spring Data JPA For DataTables, which is a Spring Data JPA extension to work with the great jQuery plug-in DataTables.
Spring boot datatables server side example
The best way to explain integration is to take spring-data-jpa-datatables example. Our goal will be to create an example where jquery datatable with be integrated with server side pagination in spring boot application. Datatables input will be directly linked to spring boot rest apis.
Lets see what are the minimum steps to integrate.
1. Add spring-data-jpa-datatables dependency in maven or Gradle project
For spring-data-jpa-datatables Gradle dependency use this (check for latest version)
// https://mvnrepository.com/artifact/com.github.darrachequesne/spring-data-jpa-datatables compile group: 'com.github.darrachequesne', name: 'spring-data-jpa-datatables', version: '5.0.0'
For spring-data-jpa-datatables Maven dependency use following
<!-- https://mvnrepository.com/artifact/com.github.darrachequesne/spring-data-jpa-datatables -->
<dependency>
<groupId>com.github.darrachequesne</groupId>
<artifactId>spring-data-jpa-datatables</artifactId>
<version>5.0.0</version>
</dependency>
2. Enable the use of DataTablesRepository factory
In Application configuration, use EnableJpaRepositories and specify DataTablesRepositoryFactoryBean class to configure.
@Configuration
@EnableJpaRepositories(repositoryFactoryBeanClass = DataTablesRepositoryFactoryBean.class)
public class DataTablesConfiguration {}
3. Extend JPA repository with DataTablesRepository
The real magic starts when you extend DataTablesRepository in your JPA repository. It enables the default methods which will be used by datatables automatically. Just extend DataTablesRepository and magic will start
public interface UserRepository extends DataTablesRepository<User, Integer> {}
4. DataTable supported Rest End point
Till now, you have done all the minimum configuration to support spring data Jpa Datatables. Now the last step on backend is enable DataTable result end point
@GetMapping(value = "/api/users")
public @ResponseBody DataTablesOutput<User> User(@Valid DataTablesInput input) {
return userRepository.findAll(input);
}
5. Create a spring mvc view and DataTable
In frontend whatever technology you are using jquery datatables, thymeleaf datatables, react, Angular or Jsp. You need to create the datatable and specify server side api url. I am using basic JQuery datatable server side example here to show the functionality. (Dont forget to incude Datatable js and css files)
<table id="roles" class="table table-striped table-bordered table-hover dataTables-example statusToggle">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
</table>
Now initialize the table in Javascript and specify the api end point to fetch data
table = $('table#roles').DataTable({
ajax: {
url: '/api/users'
},
serverSide: true,
responsive: true,
data: function(d) {
return JSON.stringify(d);
}
});
Spring boot or Spring mvc jquery editable datatable example
You can use any custom or third party library for editable databales. I prefer to use X-editable library, which is really very simple to use. This library X-editable allows you to create editable elements in datatable. X-editable can be used with any engine (bootstrap 3, bootstrap 4, jquery, jquery-ui), it includes both inline edit mode and popup edit modes.
To make editable datatables example, we need to make some changes in reccently created example, so we can identify the element to edit it. In this example i want to make name as editable field
1. Add specific class name to the field which needs to be editable.
In this example, lets use class name “edit-me” to the field “name” where we need to edit in datatables. I am assuming here the you are also returing primary key with response using key “id”. The url for update api is assumed as “/user/update/{id}”, which we will create in next steps.
table = $('table#roles').DataTable({
ajax: {
url: '/api/users'
},
serverSide: true,
responsive: true,
data: function(d) {
return JSON.stringify(d);
},
columns:[
{data: 'id'},
{data: 'name',
render: function (data, type, row, meta) {
return "<a href='#' class='edit-me' data-name='name' " +
"data-type='text' data-pk='"+ row['id'] + "' data-url='/user/update/"+row['id']+"' " +
"data-title='Enter name'>"+row['name']+"</a>";
}},
{data: 'status'},
{data: 'action'},
]
});
2. Create rest end point to update the target field from datatables example.
@RequestMapping(value = "/user/update/{id}")
public @ResponseBody
ApiResponse update(@PathVariable Long id, @RequestParam("description") String value){
if(StringUtils.isBlank(value) ){
return new ApiResponse("Value can't be empty", HttpServletResponse.SC_NOT_ACCEPTABLE);
}
try{
updateUser(id, newName); // implement this method in your code
return new ApiResponse( "success",HttpServletResponse.SC_OK);
}catch (IllegalArgumentException ex){
return new ApiResponse(ex.getMessage(), HttpServletResponse.SC_NOT_ACCEPTABLE);
}
}
Here ApiResponse is a simple Pojo class to return response to frontend in customer format, so that on frontend we can use it easily.
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class ApiResponse {
private Object result;
private Integer status;
}
3. Now add X-editable liberary js and css files.
Decide which core library you want to use: Bootstrap or jQuery UI or only jQuery. Then follow the steps here for interation of X-edtiable.
4. Initiate the field to make it editable in jquery datables
$(document).ready(function () {
$('.edit-me').editable({
mode: 'inline',
ajaxOptions: {
type: 'GET'
},
validate: function(value) {
if($.trim(value) == '') {
return 'Name is required';
}
},
params: function (params) {
params.description = params.value;
return params;
},
success: function(response, newValue) {
if(response.status == '406') {
return response.result;
}
toastr.success('Name saved successfully! ', 'Success');
},
display: function(value, sourceData){
if(value != '') {
$(this).html(value);
}
},
error: function(response, newValue) {
return 'Something went wrong! Please try later.';
}
});
});
Thats it. If everything configured correctly, table listing with Page navigation will appear now and name will be editable. Otherwise please check trouble shooting steps in spring data jpa.
This is very basic example to Integrate DataTables Into Spring Web Application In 5 Minutes but you can make it more advanced as much as you want. Like server side filtration with predicates, returning minimum view instead of whole entity, parent child relationship in table, action buttons from datatables directly. We will talk about these in upcoming blogs.
