jQuery DataTable là một plugin nâng cao bảng HTML mạnh mẽ và thông minh được cung cấp bởi thư viện jQuery JavaScript. Nó là một công cụ rất linh hoạt, về cơ bản được tạo ra để hiển thị thông tin trong các bảng cũng như thêm các tương tác vào chúng, do đó, tăng cường khả năng truy cập dữ liệu trong các bảng HTML. jQuery DataTables cho phép bạn tạo các bảng dữ liệu động trong khi thêm một số tính năng nâng cao như phân trang, sắp xếp, sắp xếp, tìm kiếm và nhiều tính năng khác vào bảng HTML với nỗ lực tối thiểu. Đảm bảo quản lý tốt hơn khi lượng dữ liệu lớn. Nó hỗ trợ cả xử lý phía máy khách cũng như xử lý phía máy chủ
Triển khai jQuery DataTable
Để sử dụng DataTables, bước đầu tiên là bao gồm thư viện jQuery vì đây là plugin jQuery. Thứ hai, hai tệp bổ sung cần được đưa vào để DataTables chạy trên trang web của bạn
Bắt đầu khóa học phát triển phần mềm miễn phí của bạn
Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác
- Tệp JavaScript DataTables
- Tệp CSS DataTables
Để bắt đầu, chúng ta nên biết rằng DataTables có thể hoạt động với dữ liệu từ nhiều nguồn khác nhau. Nó có thể hoạt động trực tiếp với một bảng HTML hoặc dữ liệu có thể được chỉ định dưới dạng một mảng trong khi nó được khởi tạo hoặc nó cũng có thể hoạt động trên dữ liệu có nguồn gốc AJAX. Để làm việc với bảng HTML, tiêu chí cơ bản là bảng phải hợp lệ
Cài đặt
Bước chính để cài đặt DataTables là bao gồm các tệp nguồn DataTables trong mã của bạn. Các tệp này có thể được sử dụng theo các cách sau
- Sử dụng các tệp riêng lẻ từ DataTables CDN
- Sử dụng trình tạo tải xuống để cài đặt các tệp cục bộ trên máy chủ của riêng bạn
- Sử dụng trình quản lý gói NPM hoặc Bower
Ví dụ về Bảng dữ liệu jQuery
Dưới đây là các ví dụ về Bảng dữ liệu jQuery
Ví dụ 1
Sau đây là một ví dụ rất đơn giản để chứng minh sức mạnh của jQuery DataTables
Mã số
Subject
Marks
Grade
Maths
90
A+
Science
85
A
English
80
A
EVS
75
B+
History
70
B
$[function[] {
$["#table_id"].dataTable[];
}];
đầu ra
- Chúng tôi bắt đầu với một bảng HTML bình thường có ba cột và sau đó chúng tôi áp dụng tính năng DataTables cho bảng này
- Sau khi toàn bộ mã được thực thi, bạn sẽ có thể thấy một bảng trông đẹp mắt như hình bên dưới
- Chúng tôi có chức năng tìm kiếm để lọc các tìm kiếm của mình từ hộp tìm kiếm hàng đầu và cả tính năng sắp xếp để sắp xếp chúng bằng cách nhấp vào tên cột
- Chúng tôi cũng đã đưa tính năng Phân trang vào trang mà bạn có thể di chuyển qua các trang.
Ví dụ #2
Trong ví dụ dưới đây, dữ liệu bảng sẽ được truyền dưới dạng mảng json thay vì bảng HTML thông thường
Mã số
Subject
Marks
Grade
Last Modified
$[function[] {
$["#table_id"].dataTable[{
aaData: [
["Maths", "95", "A+", "null"],
["English", "85", "A", "null"],
["Science", "70", "A+", "2019-06-11 06:30:00"],
["History", "80", "A", "null"],
["Arts", "75", "B", "null"],
["Economics", "70", "A+", "2019-11-09 06:30:00"],
["Commerce", "80", "A", "null"]
],
aoColumnDefs: [
{
sTitle: "Subject Name",
aTargets: ["subj_name"]
},
{
aTargets: [3],
sType: "date",
mRender: function[date, type, full] {
return full[1] == "70" ? new Date[date].toDateString[] : "N/A";
}
}
]
}];
}];
đầu ra
- Bước đầu tiên là tạo một bảng HTML, với các tiêu đề cột bắt buộc và phần thân bảng trống
- Bây giờ, bước tiếp theo sẽ là áp dụng DataTable cho bảng HTML, sau đó bảng mới của chúng ta sẽ được hiển thị như bên dưới
- Trong trường hợp này, chúng tôi cũng đã sử dụng tính năng tìm kiếm, sắp xếp và phân trang cho DataTable của mình
- Chúng tôi đã cung cấp dữ liệu cho bảng trong một mảng json bằng tùy chọn aaData
- aaColumnDefs có một mảng gồm một vài đối tượng quyết định cách mỗi cột sẽ được hiển thị trong bảng. Nó cho phép bạn sửa đổi bất kỳ cột ngẫu nhiên nào trong bảng được chỉ định bởi thuộc tính aTargets của đối tượng
- aTarget lấy các giá trị như tên lớp được chỉ định trong tiêu đề cột, chỉ mục cột hoặc _all để khớp với tất cả các cột trong bảng
- Hàm mRender được gọi khi mỗi ô của một cột cụ thể được hiển thị. Nó nhận ba tham số, dữ liệu, loại và hàng hoàn chỉnh trả về những gì chúng tôi muốn hiển thị ở vị trí của nó
- Thuộc tính “sType” chỉ định loại dự kiến của một cột giúp quyết định cách sắp xếp các giá trị cho cột đó
Ví dụ #3
Ví dụ sau đây cho thấy dữ liệu được DataTables tải vào một bảng từ AJAX [mảng] làm nguồn dữ liệu
Mã số
Name
Department
Place
Contact No.
DOJ
Email
$[document].ready[function[] {
$["#table_id"].DataTable[{
ajax: "./ajaxList.txt"
}];
}];
AJAX. danh sách ajax. txt
{
"data": [
[
"Jack Williamson",
"Analytics",
"Florida",
"7689764534",
"2015/01/21",
"jack.williamson@xyz.com"
],
[
"Greer Marshall",
"Finannce",
"London",
"8756456734",
"2013/06/26",
"greer.marshall@xyz.com"
],
[
"Jennifer Davidson",
"IT",
"Mexico",
"7854563456",
"2008/11/10",
"jennifer.davidson@xyz.com"
],
[
"Rodrix Cox",
"Accounts",
"Tokyo",
"8976549087",
"2011/08/29",
"rodrix.cox@xyz.com"
]
]
}đầu ra
- Trong ví dụ này, chúng tôi đang đặt tùy chọn ajax cho địa chỉ nguồn dữ liệu JSON
- Bảng tải dữ liệu bằng cách sử dụng AJAX, có thể tự động cập nhật bất kỳ lúc nào khi thêm bất kỳ dữ liệu nào khác
- DataTables sau đó đọc dữ liệu sẽ được hiển thị trong mỗi cột bằng cách sử dụng chỉ mục cột
Phần kết luận
jQuery DataTable là một thư viện giàu tính năng và có thể tùy chỉnh cao, có thể được sử dụng để nâng cao các bảng HTML thông thường. Thư viện này cung cấp một API đơn giản và nhiều tùy chọn cấu hình để cho phép bạn lấy dữ liệu từ nhiều nguồn dữ liệu khác nhau. Trong bài viết này, chúng tôi đã thảo luận ngắn gọn về một số tính năng hữu ích nhất của DataTables nhưng còn nhiều điều hơn thế nữa
Bài viết được đề xuất
Đây là hướng dẫn về Bảng dữ liệu jQuery. Ở đây chúng ta thảo luận về khái niệm cơ bản, cách triển khai khác nhau và các ví dụ về jQuery DataTable. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –