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 post.


Following technologies stack being used:
  • Spring Boot 2.1.1.RELEASE
  • Spring 5.1.3.RELEASE 
  • Maven 3
  • Datatable
  • jQuery
  • Free Marker
  • javascript
  • ajax

Project Structure



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>

WebController.class

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);

}
}


Vo.class

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)

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);

}
}

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'
});
});


Comments

  1. Every day I visit a number of blog sites to see content, however this offers quality based content.
    website design companies

    ReplyDelete
  2. They used their expertise and web design firm communication style top leading companies to offer useful technical recommendations.

    ReplyDelete
  3. They also demonstrated strong business knowledge and research skills
    interactive design company

    ReplyDelete

Post a Comment