DataTable-Pagination example with Spring boot, jQuery and ajax

Hello everyone, Today we will show you the DataTable-Pagination example with Spring boot, jQuery, and ajax. The link to download the source code is provided at the end of this tutorial.

Project Structure:



pom.xml

POM stands for project object model. It's the fundamental unit of work in Maven. It is an XML file that contains information about the project and configuration details used to build the project. It downloads required libraries easily using POM XML tags.
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.5</version>
<relativePath/>
</parent>
<groupId>com.knf.dev.demo</groupId>
<artifactId>springbootdatablepagination</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springbootdatablepagination</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>11</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>


WebController.java

The @Controller annotation has been part of the framework for a very long time.@Controller annotation designates that the annotated class is a controller. It is autodetected through classpath scanning.
package com.knf.dev.demo.springbootdatablepagination.controller;

import com.knf.dev.demo.springbootdatablepagination.vo.Vo;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.ArrayList;
import java.util.List;

@Controller
public class WebController {

@GetMapping({"/", "/view"})
public String view() {
return "index";
}

@GetMapping({"/getcall"})
public ResponseEntity<Vo> listAllUsers() {

// Dummy list of values
List<String[]> obj = new ArrayList<>();
for (int i = 1; i <= 1000; i++) {
String uname = "username-";
String lname = "lastname-";
String Id = "Id-";
String email = "sibinknf@gmail.com-";
String pin = "pin-";
String mStringArray[] = {uname + i, lname + i, Id + i,
email + i, pin + i};
obj.add(mStringArray);
}
Vo vo = new Vo();
vo.setData(obj);
return new ResponseEntity<>(vo, HttpStatus.OK);
}
}
Vo.java
package com.knf.dev.demo.springbootdatablepagination.vo;

import java.util.List;

public class Vo {
private List<String[]> data;

public List<String[]> getData() {
return data;
}

public void setData(List<String[]> data) {
this.data = data;
}
}



Spring-boot(Main class)
The Spring Boot application's main class contains a public static void main() method that starts up the Spring ApplicationContext.
package com.knf.dev.demo.springbootdatablepagination;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringbootdatablepaginationApplication {

public static void main(String[] args) {
SpringApplication.
run(SpringbootdatablepaginationApplication.class, args);
}
}


View(index.ftlh)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Knf|Pagination-Datatables</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../css/jquery.dataTables.min.css">
<body>
<section class="content">
<div class="container-fluid">
<table id="example" class="display" style="width: 100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Id</th>
<th>email</th>
<th>pin</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Id</th>
<th>email</th>
<th>pin</th>
</tr>
</tfoot>
</table>
</div>
</section>
<script src="../../js/jquery-3.3.1.js"></script>
<script src="../../js/controller.js"></script>
<script src="../../js/jquery.dataTables.min.js"></script>
</body>
</html>


controller.js
$(document).ready(function () {
$('#example').DataTable({
"ajax": 'getcall'
});
});


Local Setup:

Step 1: Download or clone the source code to a local machine.

Step 2mvn clean install

Step 3: Run the Spring Boot application
mvn spring-boot:run


Popular posts from this blog

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring boot video streaming example-HTML5

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Spring Webflux File Download - REST API Example

Node JS mini projects with source code - free download

ReactJS, Spring Boot JWT Authentication Example