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.649

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

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần 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 đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

+ 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.

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

Các bạn cần 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
<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ố.