Bootstrap Filter Table + Ajax JQuery + SpringBoot RestAPI

In the tutorial, JavaSampleApproach will show you how to create Bootstrap Filter Table with JQuery and SpringBoot RestAPI.

Related posts:
JQuery uses Bootstrap Table to display data from SpringBoot RestAPI
Bootstrap Image with SpringBoot RestAPI
Bootstrap Filter List with JQuery and SpringBoot RestAPIs

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– JQuery
– Bootstrap
– Spring Boot – 1.5.7.RELEASE

II. Goal – Bootstrap Filter Table

Bootstrap does NOT support a typical component for filtering. So we can use JQuery to filter elements:

$("#inputFilter").on("keyup", function() {
    var inputValue = $(this).val().toLowerCase();
    $("#customerTable tr").filter(function() {
    	$(this).toggle($(this).text().toLowerCase().indexOf(inputValue) > -1)
    });
});

In the tutorial, We create SpringBoot project as below:

Bootstrap Filter Table  with Jquery and SpringBoot RestAPI - project structure

results:

-> fetch data

Bootstrap Filter Table with Jquery and SpringBoot RestAPI - http fetch data

Bootstrap Filter Table with Jquery and SpringBoot RestAPI - load data

-> filter data on table:

Bootstrap Filter Table with Jquery Filter and SpringBoot RestAPI - filter data

III. Practice

Step to do:
– Create SpringBoot project
– Create Web Controller
– Create RestAPI
– Create index.html
– Create Jquery script

1. Create SpringBoot project

Using Spring Tool Suite to create a Spring Starter Project with needed dependencies:


	org.springframework.boot
	spring-boot-starter-thymeleaf


	org.springframework.boot
	spring-boot-starter-web

2. Create Web Controller
package com.javasampleapproach.restapiimage.controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class WebController {
	@GetMapping(value="/")
    public String homepage(){
        return "index";
    }
}
3. Create RestAPI
package com.javasampleapproach.jqueryfilter.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

import javax.annotation.PostConstruct;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.javasampleapproach.jqueryfilter.model.Address;
import com.javasampleapproach.jqueryfilter.model.Customer;

@RestController
@RequestMapping("/api/customer")
public class RestAPIs {
	
	Map custStores = new HashMap();
	
	@PostConstruct
    public void initIt() throws Exception {
        custStores.put(Long.valueOf(1), new Customer(new Long(1), "Jack", 25, new Address("NANTERRE CT", "77471")));
        custStores.put(Long.valueOf(2), new Customer(new Long(2), "Mary", 37, new Address("W NORMA ST", "77009")));
        custStores.put(Long.valueOf(3), new Customer(new Long(3), "Peter", 18, new Address("S NUGENT AVE", "77571")));
        custStores.put(Long.valueOf(4), new Customer(new Long(4), "Amos", 23, new Address("E NAVAHO TRL", "77449")));
        custStores.put(Long.valueOf(5), new Customer(new Long(5), "Craig", 45, new Address("AVE N", "77587")));
        custStores.put(Long.valueOf(6), new Customer(new Long(6), "Aries", 19, new Address("Broadway/Reade St, New York", "10007")));
        custStores.put(Long.valueOf(7), new Customer(new Long(7), "Brice", 39, new Address("Columbus, OH 43215, USA", "43215")));
        custStores.put(Long.valueOf(8), new Customer(new Long(8), "Cage", 24, new Address("Plano, TX 75074", "75074")));
        custStores.put(Long.valueOf(9), new Customer(new Long(9), "Ellen", 41, new Address("Modesto, CA 95354", "95354")));
        custStores.put(Long.valueOf(10), new Customer(new Long(10), "Brice", 32, new Address("Atlanta, GA 30334", "30334")));
    }
	 
	@GetMapping(value = "/all")
	public List getResource() {
		
		List custList = custStores.entrySet().stream()
		        .map(entry -> entry.getValue())
		        .collect(Collectors.toList());
		
		return custList;
	}
}
4. Create index.html

 


      Spring Boot - DELETE-UPDATE AJAX Example
      
      %MINIFYHTML55fb9fb5498782b08d0d88cd3a7fabcc16%%MINIFYHTML55fb9fb5498782b08d0d88cd3a7fabcc17%%MINIFYHTML55fb9fb5498782b08d0d88cd3a7fabcc18%

 

Filter Table

Type some text to search the table for Id, Name, Age, Street, PostCode:

Id Name Age Street Postcode
%MINIFYHTML55fb9fb5498782b08d0d88cd3a7fabcc19%
5. Create Jquery script
$(document).ready(function() {
	
	// DO GET
	$.ajax({
		type : "GET",
		url : "api/customer/all",
		success: function(result){
			$.each(result, function(i, customer){
				
				var customerRow = '' +
									'' + customer.id + '' +
									'' + customer.name.toUpperCase() + '' +
									'' + customer.age + '' +
									'' + customer.address.street + '' +
									'' + customer.address.postcode + '' +
								  '';
				
				$('#customerTable tbody').append(customerRow);
				
	        });
			
			$( "#customerTable tbody tr:odd" ).addClass("info");
			$( "#customerTable tbody tr:even" ).addClass("success");
		},
		error : function(e) {
			alert("ERROR: ", e);
			console.log("ERROR: ", e);
		}
	});
	
	// do Filter on View
	$("#inputFilter").on("keyup", function() {
	    var inputValue = $(this).val().toLowerCase();
	    $("#customerTable tr").filter(function() {
	    	$(this).toggle($(this).text().toLowerCase().indexOf(inputValue) > -1)
	    });
	});
})

IV. Sourcecode

SpringBootstrapJqueryFilters



By grokonez | November 20, 2017.

Last updated on May 10, 2018.



Related Posts


2 thoughts on “Bootstrap Filter Table + Ajax JQuery + SpringBoot RestAPI”

  1. i implemented your js to my project and it works well but when you search something thead’s are dissappering too … i dont wanna lose table head .. so can you edit your js to not to search in table head ?

Got Something To Say:

Your email address will not be published. Required fields are marked *

*