NodeJS/Express + Bootstrap Filter Table + JQuery example

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

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:

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

More at:

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

444 bài viết.
77 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 6 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 5 tháng trước
1 0
Bài viết liên quan
White
20 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 5 năm trước
20 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
444 bài viết.
77 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!