14 jQuery HTML Table Plugins

Chào các bạn,

Đã là 1 coder thì có lẽ ít có bạn nào chưa từng làm việc trên table nhỉ? Làm việc với table tưởng dễ nhưng thực chất cũng ko đơn giản. Với những table có sort data, scroll table, fix table thì chắc cũng không ít bạn phải vò đầu bứt tai để tìm giải pháp nhỉ. Bài viết này của mình giới thiệu tới 17 plugins chuyên về table cung cấp các chức năng "khó đỡ" như sorting, filtering, searching, pagination và even in-line editing. Nào bây giờ chúng ta cùng đi khai phá những plugins này nhé.

1. DataTables

DataTables là 1 plugin của jQuery Javascript library. Plugin này là một công cụ rất linh hoạt, dựa trên nền tảng của cải tiến lũy tiến và sẽ thêm các điều khiển nâng cao tương tác với bất kỳ HTML table nào. Có thể tìm hiểu kỹ hơn tại https://datatables.net/

2. tQuery

Plugin này sẽ khiến các table đơn giản trở nên năng động hơn nhiều. Plugin này được tạo nên bởi sự kết hợp giữa tính linh hoạt và dễ dàng. Nó hỗ trợ người dùng custom design, hỗ trợ nhiều định dạng để sort column, giúp cho việc export và import dữ liệu dễ dàng hơn. Tuy nhiên, plugin này là mất phí. Có điều nó cũng khá là rẻ. Chỉ với 7$ là bạn có thể sở hữu plugin tuyệt vời này.

Link tham khảo: https://codecanyon.net/item/tquery-dynamic-tables/89478

3. tablesaw

Là một nhóm bao gồm nhiều pugin hỗ trợ cho table

Link tham khảo: https://github.com/filamentgroup/tablesaw

4. Handsontable

Handsontable là 1 trình soạn thảo đơn giản dạng grid giống như Excel-like được dùng cho HTML, JavaScript & jQuery. Nó được trang bị các cột, các dòng tiêu đề, Autoexpanding, Legend, Autocomplete, Scroll, Drag-down, Context menu, Save features,...

Link tham khảo: https://handsontable.com/

5. jTable

jTable là một plugin jQuery được sử dụng để tạo các bảng CRUD dựa trên AJAX mà không cần mã hóa HTML hoặc Javascript.

Link tham khảo: http://www.jtable.org/

6. FooTable

FooTable là một plugin jQuery hỗ trợ việc làm responsive cho table mà ko cần bootstrap hỗ trợ.

Link tham khảo: https://fooplugins.github.io/FooTable/

7. flexigrid

Plugin này hỗ trợ việc thay đổi kích cỡ của các cột đồng thời cho phép scoll dữ liệu để khớp với các tiêu đề. Cùng với đó là khả năng kết nối data dựa trên xml bằng Ajax để load content.

Link tham khảo: https://www.js-tutorials.com/jquery-tutorials/simple-example-use-jquery-flexigrid/

8. Dynatable

Dynatable là 1 plugin sử dụng jQuery, HTML5, và JSON. Vì vậy nó khá linh hoạt, rõ ràng.

Link tham khảo: https://www.dynatable.com/

9. tableclothjs

tabsheet.js là một plugin jQuery giúp bạn dễ dàng tạo kiểu HTML table cùng với một số tùy chỉnh đơn giản.

Link tham khảo: http://tableclothjs.com/

10. jQuery HighchartTable

Là dạng plugin jQuery cho phép chuyển đổi các bảng dữ liệu HTML của bạn thành các biểu đồ Highcharts ưa thích.

Link tham khảo: http://highcharttable.org/

11. tablesorter

framesorter là một plugin jQuery để biến một bảng HTML tiêu chuẩn với các thẻ THEAD và TBODY thành một bảng có thể sắp xếp mà không cần làm mới trang. Framesorter có thể phân tích thành công và sắp xếp nhiều loại dữ liệu bao gồm dữ liệu được liên kết trong một ô.

Link tham khảo: https://mottie.github.io/tablesorter/docs/

12. Sticky Table Headers & Columns

Plugin này hỗ trợ việc sticky phần header hoặc một cột nào đó của table

Link tham khảo: https://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/

13. jQuery ReStable

jQuery ReStable là một plugin jQuery rất đơn giản và nhẹ (~ 1Kb), hỗ trợ trong việc chúng thu gọn table vào danh sách ul.

link tham khảo: https://codeb.it/restable/

14. jQuery Animated Table Sorter

jQuery Animated Table Sorter là 1 thư viện hỗ trợ việc sort table đơn giản. Cùng với đó là những hiệu ứng khi sort.

Link tham khảo http://www.matanhershberg.com/plugins/jquery-animated-table-sorter/

Như vậy, với nhiều plugin có chức năng khác nhau, đơn giản có, phức tạp đều có thì mỗi bạn có thể tự chọn cho mình những plugin thích hợp nhất thay vì ngồi vò đầu bứt tai để tìm giải pháp cho table. Hi vọng bài viết này sẽ hỗ trợ các bạn tốt nhất có thể.

Chúc các bạn thành công!