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


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns=""
<!-- lookup parent from repository -->
<!-- spring mvc, rest -->


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;

public class WebController {
@GetMapping({"/", "/view"})
public String view() {
return "index";

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 = "";
String pin = "pin-";
String mStringArray[] = {uname + i, lname + i, Id + i,
                                        email + i, pin + i};

Vo vo = new Vo();
return new ResponseEntity<>(vo, HttpStatus.OK);



import java.util.List;

public class Vo {
private List<String[]> data;

public List<String[]> getData() {
return data;

public void setData(List<String[]> data) { = data;

spring-boot(Main class)

package com.knowledgefactory.knowledgefactorydemo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

class KnowledgefactorydemoApplication {

public static void main(String[] args) {, args);



<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 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">
<section class="content">
<div class="container-fluid">
<table id="example" class="display" style="width: 100%">
<th>First name</th>
<th>Last name</th>
<th>First name</th>
<th>Last name</th>
<script src="../../js/jquery-3.3.1.js"></script>
<script src="../../js/controller.js"></script>
<script src="../../js/jquery.dataTables.min.js"></script>


$(document).ready(function () {
"ajax": 'getcall'


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

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

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

  4. We appreciated their honesty and transparency, which enabled both teams to challenge one another…
    UX design agency


Post a Comment