Bài 21: Tạo bảng có tính năng lọc và tìm kiếm với DataTable JS

0 1.160

Chúng ta đã biết cách tạo bảng có tính năng tìm kiếm bằng code jquery trong bài 20. Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo bảng có tính năng lọc và tìm kiếm với thư viện Datatable JS. Thư viện này giúp chúng ta tạo bảng dữ liệu nhanh và đầy đủ tính năng hơn.

Video – Tạo bảng có tính năng lọc và tìm kiếm với DataTable JS

Ý tưởng

+ Sử dụng thư viện ngoài DataTable JS nên các bước code cũng ít

+ Truy cập vào trang datatables.net để lấy link CDN và dữ liệu demo tại trang Example

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

Hướng dẫn chi tiết

Phần HTML và CSS

Chủ yếu là dữ liệu demo. Bạn xem trong video nhé. Quan trọng là nhớ thêm thư viện vào file html của bạn.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

code demo nằm ở đây

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Phần JS

Chạy DataTable bằng câu lệnh này trong file script.js của bạn hoặc thêm trực tiếp và file file trong thẻ script cũng được.

$(document).ready(function() {
$('#example').DataTable();
});

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ

Bạn cũng có thể thích
Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.