DataTables là một jQuery plugin support việc tạo bảng danh sách và thêm các tương tác vào đó. DataTables cung cấp tính năng tìm kiếm, sắp xếp và phân trang mà không cần thiết lập thêm gì. Trong bài này, chúng ta sẽ đi qua một số điểm cơ bản của DataTables và cách sử dụng một vài tính năng cao cấp của nó.
Thiết lập DataTables
Bước đầu tiên đó là download library DataTables từ website về. Nếu bạn không muốn download file, bạn có thể sử dụng Microsoft CDN. Bạn nên thêm nó vào trong thư viện jQuery và nên sử dụng phiên bản mới nhất.
Quy tắc đặt tên
Trước khi tìm hiểu tiếp, chúng ta hãy xem quy tắc đặt tên của thư viện này. DataTables sử dụng Hungarian notation để đặt tên biến số, nói một cách đơn giản đó là thêm các tiền tố vào trước tên biến để thư viện này có thể hiểu được kiểu dữ liệu của biến.
n - Biến số biểu thị một node
o - Biến số biểu thị một object
a - Biến số biểu thị một array
s - Biến số biểu thị một string
b - Kiểu Boolean
f - Kiểu Float
i - Biến số biểu thị kiểu Integer
fn - Biến số biểu thị một hàm
Bạn có thể đôi lúc sẽ nhìn thấy nhiều tiền tố được sử dụng cùng một lúc, ví dụ như ao, sẽ biểu thị một mảng của các object.
Bắt đầu tìm hiểu
DataTables có thể làm việc với dữ liệu từ nhiều nguồn khác nhau. Nó có thể làm việc trực tiếp với một bảng HTML hoặc ta có thể sử dụng dữ liệu là một mảng khi đang khởi tạo. Hoặc nó có thể xử lý đối với dữ liệu đến tự các nguồn Ajax.
Trong phần này, chúng ta sẽ tạo ra một danh sách các website. Chúng ta sẽ bắt đầu với việc liệt kê ra một số tên website, sau đó ta sẽ thêm vào một số cột và tính năng khác. Ở đây, chúng ta có một bảng HTML với chỉ một cột duy nhất sử dụng để liệt kê danh sách tên của 3 trang web. Hãy cùng xem DataTables có thể làm gì với một thiết lập đơn giản.
Sites
SitePoint
Learnable
Flippa
$[function[]{
$["#example"].dataTable[];
}]
Copy-paste đoạn code này vào một trang html và mở nó ra trên browser. Bạn sẽ nhìn thấy một bảng khá đẹp như sau.
' + url + ''; } },{ "aTargets":[ 3 ] , "sType": "date" , "mRender": function[date, type, full] { return [full[2] == "Blog"] ? new Date[date].toDateString[] : "N/A" ; } }] }];
Bây giờ bảng của chúng ta sẽ hiện như dưới đây. Chúng ta có một cột URL có thể ấn vào được, và cột ngày cập nhật mới nhất nhìn khá đẹp.
' + url + '';
}
},{
"mData": "editor.name"
},{
"mData": "editor.phone"
},{
"mData":"editor",
"mRender": function[data]{
return data.email.join["
"];
}
}]
}];
Ở đây, ta vừa ra lệnh cho DataTables tải dữ liệu từ server bằng cách thiết lập "bServerSide": true. Khi chọn bằng true, ta cần cung cấp cả nguồn để lấy dữ liệu bằng cách sử dụng property sAjaxSource. Trong dữ liệu json trả về từ server, mặc định DataTables sẽ tìm đến aaData để lấy dữ liệu hiển thị ở bảng. Bạn có thể override việc này bằng cách chỉ ra một tên attribute trong property sAjaxDataProp.
Trong trường hợp này, chúng ta sẽ
lấy được một mảng của json object, và ta cần nối key nào cần hiển thị ở column nào. Ta đã sử dụng aoColumns thay vì aoColumnDefs. Cả 2 đều có cùng xử lý nhưng theo 2 cách khác nhau. Khi sử dụng aoColumns, độ dài của mảng cần phải bằng với số cột trong bảng HTML mà ta cần map cho mỗi cột.
Trong json response ở đây, trường editor là một object với các trường name, email và phone. “mData“: “editor.name” sẽ yêu cầu DataTables lấy property name
của object editor. Chú ý rằng phone và email là các mảng, và sẽ được tự động được nối vào sử dụng comma, hoặc ta có thể tự customer một hàm mRender để làm cho nó nhìn đẹp hơn.
Ngoài ra...
Bên cạnh các tính năng vừa nêu ra ở trên, DataTables còn cung cấp nhiều phương thức rất hữu dụng và ta có thể mở rộng nó bằng cách viết plugin của chính mình. Cũng có rất nhiều API đơn giản có thể dùng để điều chỉnh bảng sau khi được tạo ra.
var oTable = $['#example']. dataTable[];
$['#example'].on['click', 'tr', function[]{
var oData = oTable.fnGetData[this];
console.log[oData];
}]
Đoạn code này sẽ log lại giá trị của
dữ liệu trong row khi ta ấn vào đó. fnGetData sẽ lấy TR/TD node hoặc index của một row và trả về giá trị của row hoặc cell.
Kết luận
DataTables là một thư viện có đa dạng các tính năng cũng như có đủ sự mềm dẻo giúp ta thao tác với bảng và việc lên danh sách. Thư viện này cũng cung cấp nhiều thiết lập và API đơn giản. Rất khó để có thể diễn giải hết tất cả các tính năng mà nó cung cấp chỉ trong một bài viết, vì thế ở đây tôi chỉ giới thiệu qua với các bạn về những tính năng hữu dụng và được sử dụng nhiều nhất.
Tài liệu tham khảo
- //www.sitepoint.com/working-jquery-datatables/
- //datatables.net/