JQuery uses Bootstrap Table to display data from SpringBoot RestAPI

In this tutorial, JavaSampleApproach will show you how to implement a web application which uses JQuery & Bootstrap Table to display data from SpringBoot RestAPI.

Related posts:
Jquery Ajax POST-GET Nested Objects to SpringBoot server
Bootstrap Filter Table with JQuery and SpringBoot RestAPI
JQuery Ajax Http Delete remove data from SpringBoot RestAPI
Jquery JsonP request to cross domain | Springboot RestAPI & BootStrap

I. Technologies

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

II. Practice

In the tutorial, we build a SpringBoot project as below:

JQuery uses Bootstrap Table to display data from SpringBoot RestAPI - project structure

Step to do:
– Create Spring Boot project
– Create data models
– Create Web Controller to provide web view
– Create RestController for GET request
– Create an index.html view
– Create JQuery Ajax GET request
– Run & Check results

1. Create Spring Boot project

Using Spring Tool Suite to create a Spring Starter Project. Add project info, then press Next for needed dependencies:

JQuery uses Bootstrap Table to display data from SpringBoot RestAPI - dependency

After creating project successfully, open pom.xml file and check needed dependencies:

2. Create data models

– Create Address model:

– Create Customer model that includes Address model:

3. Create Web Controller to provide web view

4. Create RestController for GET request

5. Create an index.html view

.table-bordered class is used to add borders on all sides of the table and cells.
.table-hover class is used to add a hover effect on table rows.
.table-responsive class is used to create a responsive table. The table will scroll horizontally on small devices (under 768px).

6. Create JQuery Ajax GET request

7. Run & Check results

Build & Run project with Spring Boot mode.
–> Result:

JQuery uses Bootstrap Table to display data from SpringBoot RestAPI - result

JQuery uses Bootstrap Table to display data from SpringBoot RestAPI - response return (2)

III. Sourcecode

SpringBootJQueryBootstrapTable

By grokonez | November 2, 2017.



Related Posts


Got Something To Say:

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

*