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

0

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

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ệ

Để lại một trả lời

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