https://grokonez.com/node-js/nodejs-express-bootstrap-filter-table-jquery

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:

$("#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:

/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':

More at:

https://grokonez.com/node-js/nodejs-express-bootstrap-filter-table-jquery

#nodejs #express #restapi #bootstrap #filter #jquery