NodeJS/Express + Bootstrap Filter Table + JQuery example

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

Related posts:
NodeJs/Express RestAPIs – POST/GET/PUT/DELETE requests
NodeJS/Express Rest APIs + Bootstrap Table + Ajax 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-Bootstrap-Filter-Table-JQuery-all customers

-> Filter table:

NodeJS-Express-Bootstrap-Filter-Table-JQuery-filter

Practice

Setting up NodeJS/Express project

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

Then init NodeJS project, see prompts:

-> Install Express:

-> 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/jquery-filter-table.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-Bootstrap-Filter-Table-JQuery-browser-network-loging

-> Bootstrap views:

NodeJS-Express-Bootstrap-Filter-Table-JQuery-all customers

-> Filter:

NodeJS-Express-Bootstrap-Filter-Table-JQuery-filter

Sourcecode

To run below sourcecode, follow the guides:

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

-> Sourcecode:

NodeJS-Express-JQuery-Bootstrap-Filter-Tables

By grokonez | May 10, 2018.



Related Posts


Got Something To Say:

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

*