Lấy dữ liệu từ datatable trong javascript
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ó. Show Thiết lập DataTablesBướ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ênTrướ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ểuDataTables 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.
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. Bây giờ ta đã hiểu được khả năng của DataTables và biết được ta có thể làm được gì với nó. Với thiết lập đơn giản nhất, ta có thể tìm kiếm tên của các Website ở ô tìm kiếm góc trên bên phải và có thể sắp xếp lại chúng bằng cách ấn vào tên column. Nếu bạn phải tự làm các tính năng này, sẽ rất khó khăn phải không. Ở đây, đầu tiên ta đã thêm vào file DataTables CSS ở phía trên và Js ở phía dưới. Bây giờ, chúng ta muốn liệt kê nhiều trang web với nhiều thông tin hơn. Chúng ta sẽ làm việc với các thông tin như tên trang web, URL, kiểu web và ngày cập nhật cuối cùng, tuy nhiên ta sẽ xử lý trong một mảng JavaScript thay vì đối với một bảng HTML. Kiểu web có thể là blog, forum hoặc một marketplace. Ngày cập nhật cuối cùng có thể có giá trị null đối với những trang không phải là blog. Ở đây ta muốn hiện ra chữ N/A thay vì giá trị null ở cột ngày cập nhật cuối, và làm cho URLs là một link có thể ấn vào được. Đầu tiên ta sẽ tạo một bảng HTML, với các tên cột có sẵn, tuy nhiên không có nội dung bảng.
Hãy đưa DataTables vào trong bảng này.
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. Chúng ta đã sử dụng json array với tuỳ chọn Giá trị trong mảng Bạn có thể thấy, sort icon bị thiếu ở cột thứ hai, lý do là vì việc sort dựa trên URL không có nhiều ý nghĩa lắm. Bạn có thể disable nó đi bằng việc thêm vào
Các tính năng này trở nên đặc biệt hữu dùng khi ta hiển thị dữ liệu json trả về từ server. Cũng giống như thế, đối với cột thời gian update cuối cùng, ta cũng kiểm tra giá trị của cell ở cột thứ ba, nếu nó là một blog, ta sẽ trả về date theo format định sẵn, nếu không sẽ trả về "N/A". Attributes "sType" giúp ta chỉ ra type mong muốn của column đó, dùng để quyết định xem giá trị của cell sẽ được sort thế nào trong column. Mặc định, DataTables hỗ trợ 4 kiểu type: string, numeric, date và HTML. Bạn có thể mở rộng nó bằng cách định nghĩa một kiểu mỡi. Ở đây, ta chỉ ra rằng type là "date" vì thế nó sẽ sort dựa trên ngày tháng. Nếu ta không chỉ ra, nó sẽ coi như dữ liệu đó là String và sort, mặc dù có thể không có tác dụng gì cả khi sort theo string. Server side processingỞ ví dụ trên, chúng ta đã làm việc với một bảng thuần HTML và một mảng dữ liệu json được đưa trực tiếp vào phía client. Đôi khi dữ liệu có quá nhiều record và sẽ không phải là thông mình lắm nếu ta lấy hết tất cả dữ liệu đưa vào DataTables trong một lần. Thay vào đó, ta có thể dùng tính năng server-side processing của DataTables và chỉ lấy nhữ record đang cần hiển thị lên front-end. Mỗi khi bảng được render, DataTables sẽ gửi một request với một số parameter lên server, bao gồm điểm bắt đầu, độ dài hiển thị, dữ liệu search, các cột được sắp xếp... Server có thể sử dụng chúng trong một câu query SQL để lọc ra dữ liệu và gửi lại cho phía client. DataTables cần một vài attributes ở json trả về để hiển thị chúng chính xác ở front-end. Đó là: iTotalRecord - Số lượng các record trên bảng, trước khi lọc dữ liệu iTotalDisplayRecords - Số lượng các record trả về sau khi lọc dữ liệu sEcho - Một bản sao của sEcho được gửi từ client aaData - Mảng dữ liệu từ server Một response json từ server có thể sẽ như sau:
Để render dữ liệu này, đầu tiên chúng ta sẽ tạo một bảng html với các tiêu đề của cột tương ứng.
Ở đây, ta vừa ra lệnh cho DataTables tải dữ liệu từ server bằng cách thiết lập 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 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 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.
Đoạn code này sẽ log lại giá trị của
dữ liệu trong row khi ta ấn vào đó. Kết luậnDataTables 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
|