This article shows you DataTable-Pagination example with Spring boot, jQuery and ajax.
Following technologies stack being used:
Project Structure- Spring Boot 2.1.1.RELEASE
- Spring 5.1.3.RELEASE
- Maven 3
- Datatable
- jQuery
- Free Marker
- javascript
- ajax
View(index.ftl)
<!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'
} );
} );
WebController.class$('#example').DataTable( {
"ajax": 'getcall'
} );
} );
package com.knowledgefactory.knowledgefactorydemo;
import java.util.ArrayList;
import java.util.List;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import com.knowledgefactory.VO.Vo;
@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);
}
}
spring boot
package com.knowledgefactory.knowledgefactorydemo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplicationpublic
class KnowledgefactorydemoApplication {
public static void main(String[] args)
{ SpringApplication.run(KnowledgefactorydemoApplication.class, args); }}
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplicationpublic
class KnowledgefactorydemoApplication {
public static void main(String[] args)
{ SpringApplication.run(KnowledgefactorydemoApplication.class, args); }}
pom.xml
<?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.1.1.RELEASE</version>
<!-- lookup parent from repository -->
</parent>
<groupId>com.knowledgefactory</groupId>
<artifactId>springboot-datable-pagination-jQuery-datatable</artifactId>
<packaging>jar</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>springboot-datable-pagination-jQuery-datatable</name>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<!-- spring mvc, rest -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
<description>springboot-datable-pagination-jQuery-datatable</description>
</project>
<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.1.1.RELEASE</version>
<!-- lookup parent from repository -->
</parent>
<groupId>com.knowledgefactory</groupId>
<artifactId>springboot-datable-pagination-jQuery-datatable</artifactId>
<packaging>jar</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>springboot-datable-pagination-jQuery-datatable</name>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<!-- spring mvc, rest -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
<description>springboot-datable-pagination-jQuery-datatable</description>
</project>
Run the spring boot application :$ mvn spring-boot: run
Your articles and contents are encouraging.
ReplyDeletecompanies in the world
Every day I visit a number of blog sites to see content, however this offers quality based content.
ReplyDeletewebsite design companies