DataTable-Pagination example with Spring boot,jQuery and ajax free download

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



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

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

}}


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>

Run the spring boot application using the following command

$ mvn spring-boot: run

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

Post a Comment