NodeJS/Express + Bootstrap Filter List + JQuery example

In the tutorial, we show how to implement Bootstrap Filter List with JQuery and NodeJS/Express RestAPIs.

Related posts:
NodeJs/Express RestAPIs – POST/GET/PUT/DELETE requests
NodeJS/Express + Bootstrap Filter Table + JQuery

Goal

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

We create a NodeJS/Express project as below structure:

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

-> Bootstrap view:

NodeJS-Express-JQuery-Bootstrap-Filter-List-browser-network-view

-> Filter data:

NodeJS-Express-JQuery-Bootstrap-Filter-List-browser-network-filter

Practice

Setting up NodeJS/Express project

Create a folder ‘NodeJS-Express-Bootstrap-Filter-List-JQuery’:

Then init NodeJS project:

-> Install Express, Body-Parser:

-> see package.json file:

Frontend
Create Bootstrap views

./views/index.html file:

./views/404.html file:

Implement Jquery scripts

– For loading data and filter data, we implement a file ./resources/static/js/load-data-filter-list.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-JQuery-Bootstrap-Filter-List-browser-network-log

-> Bootstrap view:

NodeJS-Express-JQuery-Bootstrap-Filter-List-browser-network-view

-> Filter Data:

NodeJS-Express-JQuery-Bootstrap-Filter-List-browser-network-filter

Sourcecode

To run below sourcecode, follow the guides:


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

-> Sourcecode:
NodeJS-Express-Bootstrap-Filter-List-JQuery

By grokonez | May 10, 2018.



Related Posts


Got Something To Say:

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

*