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
Contents
Goal
Bootstrap does NOT support a typical component for filtering. So we can use JQuery to filter elements:
1 2 3 4 5 6 | $("#inputFilter").on("keyup", function() { var inputValue = $(this).val().toLowerCase(); $("#customerTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(inputValue) > -1) }); }); |
We create a NodeJS/Express project as below structure:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /NodeJS-Express-JQuery-Bootstrap-Filter-Tables /app /controllers customer.controller.js /routes customer.route.js /node_modules /resources /static /js jquery-filter-table.js /views 404.html index.html package.json package-lock.json server.js |
Run above project then makes a request http://localhost:8081
-> Bootstrap view:
-> Filter table:
Practice
Setting up NodeJS/Express project
Create a folder ‘NodeJS-Express-JQuery-Bootstrap-Filter-Tables’:
1 2 | mkdir NodeJS-Express-JQuery-Bootstrap-Filter-Tables cd NodeJS-Express-JQuery-Bootstrap-Filter-Tables |
Then init NodeJS project, see prompts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | NodeJS-Express-JQuery-Bootstrap-Filter-Tables>npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (nodejs-express-jquery-bootstrap-filter-tables) version: (1.0.0) description: Bootstrap Filter Tables with JQuery + NodeJS/EXpress entry point: (index.js) server.js test command: git repository: keywords: NodeJS, Express, Bootstrap-Filter-Table, JQuery author: grokonez.com license: (ISC) About to write to C:\Users\pc\Desktop\nodejs\NodeJS-Express-JQuery-Bootstrap-Filter-Tables\package.json: { "name": "nodejs-express-jquery-bootstrap-filter-tables", "version": "1.0.0", "description": "Bootstrap Filter Tables with JQuery + NodeJS/EXpress", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "NodeJS", "Express", "Bootstrap-Filter-Table", "JQuery" ], "author": "grokonez.com", "license": "ISC" } Is this ok? (yes) yes |
-> Install Express:
1 | npm install express body-parser --save |
-> see package.json file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | { "name": "nodejs-express-jquery-bootstrap-filter-tables", "version": "1.0.0", "description": "Bootstrap Filter Tables with JQuery + NodeJS/EXpress", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "NodeJS", "Express", "Bootstrap-Filter-Table", "JQuery" ], "author": "grokonez.com", "license": "ISC", "dependencies": { "body-parser": "^1.18.2", "express": "^4.16.3" } } |
Frontend
Create Bootstrap views
– ./views/index.html file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE HTML> <html> <head> <title>Bootstrap Filter Table + NodeJS/Express</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="/static/js/jqueryAjax.js"></script> </head> <body> <div class="container"> <h2>Bootstrap Filter Table</h2> <div class="row col-md-7 "> <div style="margin-bottom:20px; padding:10px; background-color:#336699; color:white;"> <p>Type some text to search the table for <strong>Id</strong>, <strong>Name</strong>, <strong>Age</strong>, <strong>Street</strong>, <strong>PostCode</strong>:</p> <input class="form-control" id="inputFilter" type="text" placeholder="Search.." /> </div> <table id="customerTable" class="table table-bordered table-hover table-responsive"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Age</th> <th>Street</th> <th>Postcode</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </body> </html> |
– ./views/404.html file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="en"> <head> <title>404 Error!</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="jumbotron text-center"> <h1>404 Error!</h1> <p>PAGE NOT FOUND</p> </div> </body> </html> |
Implement Jquery scripts
– For loading data and filter data, we implement a file ./resources/static/js/jquery-filter-table.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | $(document).ready(function() { // DO GET $.ajax({ type : "GET", url : "api/customers/all", success: function(result){ $.each(result, function(i, customer){ var customerRow = '<tr>' + '<td>' + customer.id + '</td>' + '<td>' + customer.name.toUpperCase() + '</td>' + '<td>' + customer.age + '</td>' + '<td>' + customer.address.street + '</td>' + '<td>' + customer.address.postcode + '</td>' + '</tr>'; $('#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) }); }); }) |
Backend
Create Express Routes
– ./app/routes/customer.route.js file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | module.exports = function(app) { var express = require("express"); var router = express.Router(); const customers = require('../controllers/customer.controller.js'); var path = __basedir + '/views/'; router.use(function (req,res,next) { console.log("/" + req.method); next(); }); app.get('/', (req,res) => { res.sendFile(path + "index.html"); }); // Retrieve all Customers app.get('/api/customers/all', customers.getAll); app.use("/",router); app.use("*", (req,res) => { res.sendFile(path + "404.html"); }); } |
Implement Controllers
– ./app/controllers/customer.controller.js file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | // Fetch all Customers var customers = [ { id: 1, name: "Jack", age: 25, address:{ street: "NANTERRE CT", postcode: "77471" } }, { id: 2, name: "Mary", age: 37, address:{ street: "W NORMA ST", postcode: "77009" } }, { id: 3, name: "Peter", age: 17, address:{ street: "S NUGENT AVE", postcode: "77571" } }, { id: 4, name: "Amos", age: 23, address:{ street: "E NAVAHO TRL", postcode: "77449" } }, { id: 5, name: "Craig", age: 45, address: { street: "AVE N", postcode: "77587" } }, { id: 6, name: "Aries", age: 19, address: { street: "Broadway/Reade St, New York", postcode: "10007" } }, { id: 7, name: "Brice", age: 39, address: { street: "Columbus, OH 43215, USA", postcode: "43215" } }, { id: 8, name: "Cage", age: 24, address: { street: "Plano, TX 75074", postcode: "75074" } }, { id: 9, name: "Ellen", age: 41, address: { street: "Modesto, CA 95354", postcode: "95354" } }, { id: 10, name: "Brice", age: 32, address: { street: "Atlanta, GA 30334", postcode: "30334" } } ] exports.getAll = (req, res) => { console.log("--->Get All Customers: \n" + JSON.stringify(customers, null, 4)); res.send(customers); }; |
Implement Server.js
– ./server.js file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var express = require('express'); var app = express(); var bodyParser = require('body-parser'); app.use(bodyParser.json()) app.use(express.static('resources')); global.__basedir = __dirname; require('./app/routes/customer.route.js')(app); // Create a Server var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("App listening at http://%s:%s", host, port) }) |
Run & Check results
Start NodeJS server, then makes a request: http://localhost:8081
-> Logs:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | NodeJS-Express-JQuery-Bootstrap-Filter-Tables>node server.js App listening at http://:::8081 --->Get All Customers: [ { "id": 1, "name": "Jack", "age": 25, "address": { "street": "NANTERRE CT", "postcode": "77471" } }, { "id": 2, "name": "Mary", "age": 37, "address": { "street": "W NORMA ST", "postcode": "77009" } }, { "id": 3, "name": "Peter", "age": 17, "address": { "street": "S NUGENT AVE", "postcode": "77571" } }, { "id": 4, "name": "Amos", "age": 23, "address": { "street": "E NAVAHO TRL", "postcode": "77449" } }, { "id": 5, "name": "Craig", "age": 45, "address": { "street": "AVE N", "postcode": "77587" } }, { "id": 6, "name": "Aries", "age": 19, "address": { "street": "Broadway/Reade St, New York", "postcode": "10007" } }, { "id": 7, "name": "Brice", "age": 39, "address": { "street": "Columbus, OH 43215, USA", "postcode": "43215" } }, { "id": 8, "name": "Cage", "age": 24, "address": { "street": "Plano, TX 75074", "postcode": "75074" } }, { "id": 9, "name": "Ellen", "age": 41, "address": { "street": "Modesto, CA 95354", "postcode": "95354" } }, { "id": 10, "name": "Brice", "age": 32, "address": { "street": "Atlanta, GA 30334", "postcode": "30334" } } ] |
-> Browser Network’s Logs:
-> Bootstrap views:
-> 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: