12 Table jQuery Ảo Diệu

1401

Bảng (Table) là một trong những phần tử già cỗi nhất HTML. Đã từng có lúc table được sử dụng rộng rãi cho cả nội dung và web layout. Ơn giời, layout theo bảng gần như đã chết đi (với ngoại lệ HTML email), và ngày nay, khi bạn cần đến bảng, thì chỉ với mục đích tạo ra chúng ngay từ ban đầu mà thôi: thể hiện dữ liệu theo bảng.

Thông tin cho Dev

Bảng, vì là một phần già cỗi trong phức hợp HTML, nên không quá phù hợp với các thiết kế hướng đến di động, và cũng không mang lại bất cứ tính năng cao cấp mới lạ nào. Bảng về đơn giản chỉ hiển thị dữ liệu bạn có, và cho một một số trường hợp thực dụng khác.

Tuy nhiên, thường thì bạn sẽ muốn Bảng trở nên hiện đại hơn, có thể bằng cách hoàn toàn hỗ trợ hệ sinh thái di động với responsive layout hoặc cung cấp những tính năng cao cấp như tìm kiếm, lọc, sắp xếp hoặc các tính năng cấp cao khác.

Trong bài viết này, chúng ta sẽ tìm hiểu qua một loạt plugin do jQuery hỗ trợ để tạo, mở rộng hoặc tăng cường Bảng của bạn. Những plugin này đa dạng từ khả năng thay đổi kiểu hiển thị nhẹ nhàng, đến những giải pháp phức tạp đầy tính năng.

Dynatable

Dynatable là một plugin table cực kỳ mạnh mẽ và chuyên sâu với các tính năng đặc trưng như lọc, sắp xếp và ngắt trang. Dynatable được thiết kế với giao diện khá chuyên hóa cho lập trình viên, cho phép bạn kiếm soát cách render, cách lọc và tìm kiếm của Bảng. Đây là giải pháp có độ tùy biến rất cao.

Nếu bạn đang tìm kiếm một plugin cho phép bạn kiểm soát cách làm việc của mọi thứ, đây là sự lựa chọn phù hợp. Tuy cách tùy chỉnh có đôi chút phức tạp cho người mới, nhưng cấu hình mặc định vẫn hoạt động khá “chuẩn mực” với các tác vụ thông thường.

Một điểm ngạc nhiên nữa là plugin này khá cũ (với commit lớn cuối cùng là tận hồi 2014). Tuy vẫn có vài lần commit từ đó đến nay, và sự đóng góp từ cộng đồng, nhưng ta vẫn không chắc rằng plugin này có thực sự có được sự quan tâm đầu tư nghiêm túc hay không. Nhìn chung, đây là một plugin hay và mang lại rất nhiều tính năng phù hợp với đại đa số trang web.

Website
Github

Bootstrap Table

CSS frameworks vẫn còn nổi tiếng, và Bootstrap cũng nổi tiếng không kém. Bootstrap Table plugin là một table plugin giàu tính năng, mà vẫn rất gọn nhẹ, mang lại tất cả tính năng bạn cần và tiếp kiệp công sức cài đặt của bạn.

Sức mạnh và phạm vi của plugin này khá là ấn tượng. Bạn có thể sử dụng nó để restyle lại Bảng để khiến Báng trở nên đẹp và responsive (linh hoạt) hơn. Công cụ có các tính năng lọc, tìm, hiển thị cột theo điều kiện (ví dụ như bạn có thể ẩn cột đi để đơn giản hơn) cùng với tính năng nho nhỏ thú vị khác như export sang CSV và JSON.

Trang ví dụ tại đây giới thiệu qua cách cài đặt các phần tử này. Bạn sẽ phải dành kha khá thời gian để làm quen với document, nhưng cũng rất đáng giá khi bạn làm ra được một table tuyệt vời đầy tính năng như thế.

Bạn cần phải đang chạy một project Bootstrap hoặc tùy ý thêm Bootstrap CSS và file JS vào project của bạn. Plugin hoạt động thông qua thuộc tính data HTML chuẩn trên Bảng của bạn hoặc thông qua cách thức JS truyền thống hơn. Nếu bạn đã và đang thực hiện poject với Bootstrap rồi, đây sẽ là khởi đầu tuyệt vời. Nếu bạn đang làm việc với công cụ khác Bootstrap, bạn sẽ cần phải cân đo đong đếm được mất.

Plugin là một dự án nguồn mở được cập nhật mạnh mẽ liên tục với hàng chục contributor và hàng nghìn commit. Rất khó dự đoán liệu chúng ta sẽ thấy Bootstrap 4 hay không (vì cần phải có Bootstrap 2/3 nữa) nhưng với tình hình hiện tại, Bootstrap có vẻ như vẫn đang được duy trì ổn định.

Nếu bạn đang tìm kiếm một plugin có hỗ trợ liên tục và ổn định, đây là công cụ khá phù hợp. Bạn cũng có thể xme thử một số “bản mở rộng” do một số lập trình viên phát triển tại đây.

Website
Demo

Fixed Header Table

Fixed Header Table thực hiện tác vụ đúng như cái tên gợi ý: hiển thị đầu đề cố định ngay trên Bảng, từ đó bạn sẽ không mất dấu cột khi bạn scroll.

Plugin này làm việc với markup bảng HTML chuẩn. Công cụ sử dụng tag <thead> hoặc đôi khi là <tfoot> để tạo header cố định cho Bảng. Bạn còn có một số lựa chọn khác, như clone header xuống footer và hiện/ẩn Bảng tùy thích. Nhìn chung, mục đích của plugin này khá đơn giản, và chỉ với một ít phầm tử, nhằm giảm bớt độ phức tạp. Styling và functionality sẽ phải được thêm thủ công nếu bạn cần đến.

Nếu bạn đang tìm đến giải pháp với nhiều chức năng tổng quan hơn, thì những thư viện khác có vẻ thích hợp hơn. Hơn nữa, nên nhớ rằng đây là một plugin khá cũ (tận từ 2011) nên có thể chúng ta sẽ không được cập nhật nhiều nữa.

Website/Demo

Giải quyết mọi vấn đề trong Scalable Social Network - Đăng kí ngay!
Giải quyết mọi vấn đề trong Scalable Social Network – Đăng kí ngay!

DataTables

Bảng jQuery siêu linh hoạt này nhắm vào mở rộng Bảng HTML cơ bản, khiến chúng trở nên trực quan và hữu dụng hơn.

DataTables là một plugin toàn diện, cung cấp các tính năng gia tăng cho bảng như sắp xếp, lọc, ngắt trang và theme tùy biến.

Plugin làm việc rất đơn giản, nhưng cũng đi kèm một lượng document đáng kể để bạn có thể kiểm soát cách hiển thị, vận hàng, và hoạt động của Bảng.

Đây là một extension rất “thân thiện” với lập trình viên vì một loạt tính năng và tùy biến đa dạng nó mang lại.

Khả năng tích hợp với các framework CSS để thay đổi styling của plugin cũng khá ấn tượng. Công cụ tương thích với Bootstrap, Foundation, jQuery UI,… Các khía cạnh khác như khả năng tiếp cận Events, API system và dynamic data thông qua AJAX khiến DataTables trở thành lựa chọn vững chắc.

Nếu bạn muốn tích hợp DataTables vào một hệ thống doanh nghiệp hoặc bộ phận quan trọng nào đó, bạn có thể mua bản enterprises license để được hưởng hỗ trợ tận răng từ đội dev và yêu cầu tính năng gia tăng.

Website/Demos

jQuery HighchartTable

HighchartTable là một plugin hữu ích làm việc bằng cách tạo (dymamic) một biểu đồ Highcharts tương tác từ dữ liệu Bảng của bạn.

Plugin này đặt một loạt thuộc tính data lên các phần tử trong Bảng, tạo điều kiện để Highchart render dữ liệu bảng của bạn thành một biểu đồ dynamic/interactive.

Website của công cụ chỉ rõ tất cả tùy chọn, hướng dẫn một JSFiddle đơn giản cho mỗi tùy chọn giúp bạn thấy rõ cách làm việc của chúng. Bạn có thể kiếm soát kiểu biểu đồ, màu sắc, nhãn và các phần tử tương tác khá để phù hợp hơn với nhu cầu của bạn.

Một điều cần nhớ là plugin này không thực sự thực hiện quá trình chuyển hóa biểu đồ. Đó là phần do Highcharts xử lý, đồng nghĩa với việc bạn cũng sẽ cần thêm file JS và CSS tương ứng.

Hơn nữa, Highcharts không miễn phí với mục đích thương mại. Để dùng nó hợp pháp, bạn cần có license (và tất nhiên, nếu bạn đang phát triển cho khách hàng, bạn cần đi mua đi là vừa). Nói gì thì nói, Highcharts khá là bóng bẩy và đi kèm với hằng hà vô số tùy chọn giúp bạn sinh lời, nên phải xì tiền ra nếu dùng, cũng là điều dễ hiểu.

Website
Demo
GitHub

 

Tabulator

Tabulator là plugin jQuery được dùng để tạo (dynamic) Bảng tương tác, toàn diện từ: HTML, JavaScript array, nguồn data Ajax, hoặc dữ liệu JSON. Tabulator mang đến một loạt tính năng, như lọc, sắp xếp, điều chỉnh động rộng của cột, load dữ liệu thông minh, ngắt trang và chỉnh sửa nhập liệu trực tiếp.

Tabulator nằm trong danh sách này vì documentation kỹ lưỡng, tính năng đa dạng, và sự linh hoạt của mình. Website của công cụ đề cập đến tất cả cả tính năng nó mang lại, với tài liệu dễ hiểu kết hợp với nhiều ví dụ cụ thể.

Plugin toàn diện ở chỗ bạn có thể tùy chỉnh Bảng theo ý muốn. Bạn có thể nhóm hàng trong bảng lại dưới một header, tạo tooltips đơn giản để giải thích dữ liệu, tách trang với nội dung theo hàng, hoặc kết hợp nhiều tính năng hay để cải thiện trải nghiệm người dùng. Đây là công cụ tuyệt vời cho lập trình viên.

Đội ngũ phát triển Tabulator khá active trên GitHub, với cập nhật mỗi vài tháng và một loạt commit và bug fix qua nhiều năm. Phiên bản 2.7 được ra mắt vào tháng 10 năm 2016, nên bạn cứ yên tâm sử dụng vì có vẻ như công cụ vẫn còn được dành sự quan tâm.

Website
Demos
GitHub

FancyGrid

FancyGrid mang đến cho bạn những mẫu Bảng chuẩn mực với các tính năng truyền thống. Dù bạn đang tìm kiếm công cụ tạo Bảng đơn giản nhẹ nhành, hay Bảng có đầy đủ lọc, sắp xếp và ngắt trang, FancyGrid đều có tùy chọn tạo trải nghiệm bảng tuyệt vời cho hầu hết mọi nhu cầu.

rất nhiều cách sử dụng Fancy Grid, dựa theo cách bạn muốn sử dụng plugin. Bạn có thể sử dụng nó để tạo kiểu cho Bảng, để cung cấp tính năng mới, hoặc để kết hợp với Highchart để đồ họa hóa dữ liệu.

Một điểm thú vị là không có GitHub repo mở cho plugin. Bạn có thể download công cụ từ website của họ cho các trường hợp sử dụng cá nhân, nhưng với nhu câu thương mại, bạn sẽ cần phải mua license để sử dụng. Highcharts (phiên bản 2D) cũng cần đến license, nên bạn cần cân nhắc có nên đầu tư cho project hay không.

Website/Demos

Giải quyết mọi vấn đề trong Scalable Social Network – Đăng kí ngay!
Giải quyết mọi vấn đề trong Scalable Social Network – Đăng kí ngay!

jQuery KingTable

KingTable là một giải pháp Bảng phức tạp, hướng đến lập trình viên, mà bạn có thể tận dụng để tạo điều kiện tìm kiếm/lọc phức tạp, hoàn hảo cho accounts, quản lý project và các hoạt động thiên về dữ liệu khác.

Không như một số plugin khác của chúng tôi, KingTable được document hoàn toàn trên GitHub, với một trang Wiki riêng hướng dẫn chi tiết tất cả cài đặt và trường hợp sử dụng cho plugin.

Về mặt tính năng, plugin đi kèm hỗ trợ theme, và một vài màng lọc và event mà bạn có thể sử dụng để giúp quản lý dữ liệu dễ dàng hơn. Hơn nữa, để sử dụng hiệu quả công cụ này, bạn phải khá quen thuộc với cách tự tạo custom filter và cơ chế dữ liệu. Nếu bạn đang tìm kiếm một plugin cung cấp cài đặt cơ bản, thì có lẽ bạn nên sử dụng những giải pháp khác phù hợp hơn.

Khă năng thích ứng với di động cũng là một điểm đáng cân nhắc. Bản thân plugin hoàn toàn không quan tâm đến di động, độ responsive của Bảng ở mức thông thường (cần phải scroll hai bên hoặc các cột sẽ dính chèm bẹp vào nhau). Bạn có thể tự điều chỉnh, nhưng plugin sẽ không quan tâm.

Website/GitHub

Documentation (Wiki)

Simple Demo/Complex Demo

Stackable.js

Stackable.js là plugin jQuery xoay quanh di động nhằm cho ra Bảng thân thiện với di động bằng cách điều chỉnh layout cho các thiết bị nhỏ hơn.

Không giống những plugin khác có thêm tính năng phụ, stackable.js được sử dụng chỉ để Bảng của bạn hoạt động tốt trên di động mà thôi.

GitHub
Website/Demo

JQuery ReStable

Plugin này giúp Bảng của bạn responsive hơn trên di động, convert mỗi mục hàng thành một loạt chủ thể li để cải thiện layout và khả năng cuộn.

Giống với stackable.JavaScript, plugin này nhằm khiến table của bạn trở nên thân thiện với di động hơn. Plugin làm việc bằng cách điều chỉnh layout của mỗi hàng khi hiển thị trên màn hình kích thước bé. Công cụ sẽ xếp các cột chồng lênh nhau và tách mỗi hàng ra, để người dùng di động đọc dễ hơn.

Bản thân plugin chỉ cung cấp khả năng tinh chỉnh trên di động mà không thêm tính năng hay quá nhiều cài đặt nào khác. Nên miễn là bạn thực hiện đúng HTML markup và thêm một số jQuery cơ bản, plugin sẽ làm việc được ngay.

Website/Demo
GitHub

Giải quyết mọi vấn đề trong Scalable Social Network – Đăng kí ngay!
Giải quyết mọi vấn đề trong Scalable Social Network – Đăng kí ngay!

FooTable

FooTable là plugin mở rộng Bảng gốc Bootstrap cung cấp tìm kiếm, lọc, và nhiều tính năng thú vị để tăng cường Bảng của bạn.

FooTable trong có thể giống với Bootstrap table trước đó, nhưng điểm khác biệt với FooTable là công cụ làm việc cả khi có và không có Bootstrap, nghĩa là không cần phải thêm bất cứ file bootstrap nào.

Plugin hỗ trợ lọc, ngắt trang, sắp xếp và edit trực tiếp. Website có chỉ ra nhiều cách setting mà bạn có thể thử nghiệm, và bạn có thể tìm được mọi thông tin cần có với tài liệu riêng cho FooTable. Hơn nữa, document hướng đến lập trình viên và sẽ giả định bạn đã khá quen thuộc với event, setting và các phần tử chuyên sâu khác. Đây là công cụ cho những bạn đang tìm kiếm plugin có thể dùng ngay, đồng thời tùy biến được.

Website/Demo
GitHub

Tabella.js

Tabella là plugin tạo Bảng dynamic tập trung vào tính năng chạm/vuốt để dễ dàng cuộn Bảng dài/phức tạp.

Không như những plugin khác, bạn có thể dùng Tabella để tạo Bảng. Bạn sẽ lựa chọn các phần từ bạn muốn dùng làm container cho Bảng và sau đó cung cấp dữ liệu làm object (chỉ định giá trị tiêu đề và cột). Đây sẽ là một plugin tuyệt vời nếu vó thể sử dụng dữ liệu JSON thuần để tạo chỉnh sửa Bảng, nhưng nhìn chung vẫn khá được, cho bạn giao diện thân thiện với di động.

Nếu mục tiêu chính của bạn là Bảng dài và responsive, thì đây là một giải pháp đơn giản và tương tác cao.

GitHub
Website/Demo

Lời kết

Đây chỉ là một số plugin mà bạn có thể sử dụng trong project để mở rộng và cài thiện tính năng và hình ảnh của Bảng. Các gợi ý trên là những giải pháp từ miễn phí đến trả phí, từ đơn giản đến phức tạp hy vọng sẽ giúp bạn chọn được công cụ phù hợp nhất với nhu cầu của mình.