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

on
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. Masson_dukeJuly 18, 2020 at 4:23 AM

    Your articles and contents are encouraging.
    companies in the world

    ReplyDelete
  2. Roobet jackSeptember 2, 2020 at 12:59 AM

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

    ReplyDelete
  3. Deborah GinderNovember 30, 2020 at 9:52 PM

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

    ReplyDelete

Post a Comment