NodeJS/Express Rest APIs + Bootstrap Table + Ajax JQuery example

In the tutorial, we show how to use Bootstrap Table & Ajax JQuery to show data from NodeJS/Express RestAPIs.

Related posts:
Integrate NodeJS/Express – JQuery Ajax POST/GET – Bootstrap view
NodeJs/Express RestAPIs – POST/GET/PUT/DELETE requests

Goal

We create a NodeJS/Express project as below structure:

Run above project then makes a request http://localhost:8081:

-> Bootstrap view:

NodeJS-Express-Ajax-JQuery-Bootstrap-Table-view

Practice

Setting up NodeJS/Express project

Create a folder ‘NodeJS-Express-Ajax-JQuery-Bootstrap-Table’:

Then init NodeJS project, see prompts:

-> Install Express, Body-Parser:

-> see package.json file:

Frontend
Create Bootstrap views

./view/index.html file:

./views/404.html file:

AJax JQuery load data into Bootstrap Table

– For Ajax JQuery Load data into Bootstrap Table, we implement a file ./resources/static/jquery/ajaxLoadData.js:

Backend
Create Express Routes

./app/routes/customer.route.js file:

Implement Controllers

./app/controllers/customer.controller.js file:

Implement Server.js

./server.js file:

Run & Check results

Start NodeJS server, then makes a request: http://localhost:8081
-> Logs:

-> Browser Network’s Logs:

NodeJS-Express-Ajax-JQuery-Bootstrap-Table-request-logs

-> Bootstrap views:

NodeJS-Express-Ajax-JQuery-Bootstrap-Table-view

Sourcecode

To run below sourcecode, follow the guides:


step 0: download & extract zip file -> we have a folder ‘NodeJS-Express-Ajax-JQuery-Bootstrap-Table’
step 1: cd NodeJS-Express-Ajax-JQuery-Bootstrap-Table
step 2: npm install express body-parser –save
step 3: node server.js

-> Sourcecode:
NodeJS-Express-Ajax-JQuery-Bootstrap-Table

By grokonez | May 8, 2018.



Related Posts


1 thought on “NodeJS/Express Rest APIs + Bootstrap Table + Ajax JQuery example”

Got Something To Say:

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

*