Bài 30: Filters trong Bootstrap 4 (nâng cao)

0
239

Xin chào các bạn, bài này mình sẽ hướng dẫn các bạn 1 kiến thức nâng cao trong Bootstrap 4 đó là Filters.

Filters trong Bootstrap 4

Bootstrap không có 1 thành phần nào cho phép lọc. Tuy nhiên, chúng ta có thể sử dụng jQuery để lọc hay tìm kiếm phần tử.

Filter Table – Lọc theo bảng

Phần này sẽ giúp các bạn thực hiện việc tìm kiếm có phân biệt chữ hoa, chữ thường cho các trường trong bảng.

Mình sẽ hướng dẫn các bạn làm ví dụ để lọc dữ liệu tìm kiếm trong bảng.

Đầu tiên, chuẩn bị 1 bảng đơn giản như sau:

Tiếp theo, ở trên bảng chuẩn bị thêm 1 ô input dạng text để nhập từ tìm kiếm:

Cuối cùng, viết 1 đoạn jQuery để thực thi việc lọc, tìm kiếm:

  • Đoạn jQuery trên lặp qua từng hàng <tr> trong bảng để kiểm tra xem có bất kỳ giá trị nào khớp với giá trị của trường nhập liệu hay không.
  • Phương thức toggle() sẽ ẩn hàng không khớp với từ khóa tìm kiếm.
  • Phương thức toLowerCase() để chuyển văn bản thành chữ thường toàn bộ, điều này làm cho việc tìm kiếm rộng hơn.

Hiển thị ví dụ như sau:

Filter List – Lọc trong danh sách

Phần này thì chúng ta sẽ làm tìm kiếm cho các mục trong danh sách.

Tương tự, mình vẫn sẽ có 1 ô input nhập từ khóa tìm kiếm, 1 đoạn jQuery để thực thi vòng lặp tìm kiếm. Và khác phần bảng thì phần này mình sẽ chuẩn bị 1 danh sách ul, li.

Ví dụ như sau:

Lọc tất cả các thành phần

Ví dụ sau sẽ áp dụng Filter cho tất cả các thành phần như thẻ p, div, các nút button, ...

Kết luận

OK, như vậy là xong phần Filter, đây là kiến thức nâng cao trong Bootstrap 4, nó không đơn thuần chỉ sử dụng các class mẫu trong CSS mà còn cần tới kiến thức về jQuery nữa, nếu trong trường hợp nào cần dùng tới lọc dữ liệu thì các bạn hãy xem lại bài viết này nhé.

Và về phần lý thuyết đơn lẻ thì đây cũng là bài viết cuối cùng rồi, mình đã lọc ra gần như là đầy đủ tất cả các lý thuyết về Bootstrap 4 để các bạn theo dõi và tìm kiếm kiến thức.

Sau bài này, mình sẽ bonus cho các bạn thêm 1 số bài viết về Bootstrap 4, chủ yếu là các mẹo sử dụng, các thủ thuật và những dạng hay ứng dụng trên website nhé. Hẹn các bạn ở những bài kế tiếp.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây