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
      
      
      
	  
	  
      

 

Filter Table

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

Id Name Age Street Postcode
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

31 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 ?

  2. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time
    a comment is added I get several emails with the same comment.
    Is there any way you can remove me from that service?
    Cheers!

  3. Thanks for the auspicious writeup. It actually
    was a leisure account it. Look complex to more added agreeable from you!
    However, how could we keep in touch?

  4. I’ve been browsing on-line greater than 3 hours as of late,
    yet I never discovered any fascinating article like yours.
    It is pretty worth sufficient for me. In my view, if all site owners and bloggers made excellent content as you did, the web might be much more
    useful than ever before.

  5. I’m not that much of a online reader to be honest but your blogs really nice, keep it up!
    I’ll go ahead and bookmark your site to come back in the future.
    Many thanks

  6. I loved as much as you will receive carried out right here.
    The sketch is tasteful, your authored material stylish. nonetheless, you
    command get bought an impatience over that you wish be delivering
    the following. unwell unquestionably come more formerly
    again as exactly the same nearly very often inside case you shield this hike.

  7. Have you ever thought about writing an ebook or guest authoring on other sites?
    I have a blog based upon on the same topics you discuss
    and would really like to have you share some stories/information. I know my audience would enjoy
    your work. If you are even remotely interested, feel free
    to send me an email.

  8. Excellent post. I was checking constantly this blog and I am impressed!
    Very helpful information specifically the last part 🙂 I
    care for such information much. I was looking for this certain info for a long
    time. Thank you and good luck.

  9. My spouse and I stumbled over here from a different web page and thought I should check things out.
    I like what I see so i am just following you.
    Look forward to looking into your web page for a second
    time.

  10. I’d like to thank you for the efforts you have put in writing this site.
    I am hoping to check out the same high-grade content from you
    in the future as well. In fact, your creative writing abilities has encouraged me to get my own, personal blog now 😉

  11. Aw, thiіs was an exceptionally nicе pօst.
    Taқing the time аand actual effort toо prodսce a very gooɗ article… but wһat can I saʏ… I pᥙt
    things offf a whole lot and never seem to ցet neаrly anytfhing
    done.

  12. Everyone loves what you guys are usually up too. This type of
    clever work and coverage! Keep up the awesome works guys I’ve
    you guys to my personal blogroll.

  13. Hi, i think that i saw you visited my blog so i got here to go back the choose?.I’m trying to
    to find issues to enhance my site!I suppose its adequate to make use of a few of your ideas!!

  14. Pretty section of content. I just stumbled upon your blog and in accession capital to assert that I get in fact enjoyed account your blog posts.
    Any way I will be subscribing to your augment and even I achievement you access consistently quickly.

  15. I need to to thank you for this excellent read!! I certainly enjoyed every little
    bit of it. I have got you saved as a favorite to look at new stuff you post…

  16. Very nice post. I just stumbled upon your blog and wanted to say
    that I’ve truly enjoyed surfing around your blog posts. After
    all I’ll be subscribing to your feed and I hope you write
    again soon!

Leave a Reply

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