[Hỏi – Đáp] DataTables – jQuery Plugin quản lý table tuyệt hảo

flatsome
09/05/22
0
[quangcao]

DataTables là một jQuery Plugin rất nổi tiếng và được rất nhiều các dev sử dụng trong dự án, tích hợp phân trang, tìm kiếm nhanh, download các định dạng file PDF, XLSX, CSV…mang lại trải nhiệm người dùng rất tuyệt vời. Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng DataTables.

DataTables – jQuery Plugin quản lý table tuyệt hảo

DataTables – jQuery Plugin quản lý table tuyệt hảo
DataTables – jQuery Plugin quản lý table tuyệt hảo

DataTables cung cấp cho người dùng rất nhiều UI đẹp để tùy biến giao diện, trong bài này mình sẽ tích hợp Bootstrap 3 cho nó gần gũi và đơn giản mà lại đẹp, các bạn có thể tham khảo thêm các UI khác tại đây

Bước 1

Các bạn sẽ chèn các file css và js cần thiết vào project

Bước 2

Tạo table với khối dữ liệu như sau, khi làm việc vs MySQL và PHP thì các bạn sẽ lấy dữ liệu từ Database ra và foreach ra bên ngoài, trong phạm vi bài viết này mình sẽ demo như sau

Bảng trên có 
id=”example” và đoạn script để gọi plugin ra như sau

Vậy là xong rồi đó, chúng ta cùng mở thành quả ra xem nhé. Với các phần như vùng khoanh đỏ trong hình, các bạn có thể thay đổi bằng cách mở file 
jquery.dataTables.min.js ra và chỉnh sửa ở trong đó.

Vậy là xong rồi đó, chúng ta cùng mở thành quả ra xem nhé. Với các phần như vùng khoanh đỏ trong hình, các bạn có thể thay đổi bằng cách mở file jquery.dataTables.min.js ra và chỉnh sửa ở trong đó.
Vậy là xong rồi đó, chúng ta cùng mở thành quả ra xem nhé. Với các phần như vùng khoanh đỏ trong hình

Bonus : tích hợp thêm các button download định dạng PDF, XLSX, CSV, PRINT…

Chèn các file css và js cần thiết

Bảng table vẫn dữ nguyên như bên trên, đoạn script bây giờ sẽ thêm các thuộc tính sau

Các bạn hãy F5 để xem kết quả nhé ^^. Vậy là chúng ta đã làm thành công rồi đó, hãy click vào một button nào đó và nó sẽ down file xuống.

DataTables – jQuery Plugin quản lý table tuyệt hảo
DataTables – jQuery Plugin quản lý table tuyệt hảo

 

Trên trang chủ của Data Tables còn rất rất nhiều thứ mà mình cũng chưa tìm hiểu hết được, các bạn có thể tham khảo tại : Trang chủ

Cảm ơn các bạn đã theo dõi bài viết của mình, mọi thắc mắc các bạn hãy comment tại bài viết này mình sẽ support. Thank all !

 

Điểm 5/5 – ( Có 1 bình chọn)

 

theo :https://flatsome.xyz/datatables-jquery-plugin-quan-ly-table-tuyet.html

[quangcao]