DataTable-Pagination example with Spring boot, jQuery and ajax

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



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. 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
  4. Mary AchiApril 3, 2021 at 5:16 AM

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

    ReplyDelete

Post a Comment