2012-07-03 31 views
5

Làm cách nào để sửa đổi mã để hiển thị từng thông tin ô thành chú giải công cụ?Cách hiển thị đầu công cụ cho từng ô?

http://datatables.net/release-datatables/examples/advanced_init/events_post_init.html

$(document).ready(function() { 
/* 
* First step is to create title attributes for the rows in the table 
* This isn't needed if the required 'title' attribute is already set in the HTML in the 
* DOM 
*/ 
$('#example tbody tr').each(function() { 
var sTitle; 
var nTds = $('td', this); 
var sBrowser = $(nTds[1]).text(); 
var sGrade = $(nTds[4]).text(); 

if (sGrade == "A") 
sTitle = sBrowser+' will provide a first class (A) level of CSS support.'; 
else if (sGrade == "C") 
sTitle = sBrowser+' will provide a core (C) level of CSS support.'; 
else if (sGrade == "X") 
sTitle = sBrowser+' does not provide CSS support or has a broken implementation. Block CSS.'; 
else 
sTitle = sBrowser+' will provide an undefined level of CSS support.'; 

this.setAttribute('title', sTitle); 
}); 

/* Init DataTables */ 
var oTable = $('#example').dataTable(); 

/* Apply the tooltips */ 
oTable.$('tr').tooltip({ 
"delay": 0, 
"track": true, 
"fade": 250 
}); 
}); 

Trả lời

2

Bạn có thể đặt tiêu đề bằng cách đơn giản setAttribute cho mỗi td

$('#example tbody tr td').each(function() { 
    this.setAttribute('title', $(this).text()); 
}); 

và gọi tooltip trên td

oTable.$('td').tooltip({ 
"delay": 0, 
"track": true, 
"fade": 250 
}); 
+0

Yup. Và nếu nội dung của tooltip không có nghĩa là văn bản, bạn về mặt lý thuyết có thể lấy thông tin khác từ nơi khác (ví dụ, một thuộc tính data) bằng cách sử dụng về cơ bản cùng một kỹ thuật. –

9

Bạn có thể làm

{ "sTitle": "...", ... 
    'fnCreatedCell': function(nTd, sData, oData, iRow, iCol) { 
     nTd.title = 'Some more information'; 
    } 
} 

trong cấu hình cột của bạn. Bạn có thể sử dụng tất cả các dữ liệu hàng dễ dàng như thế này. Vì lý do, điều này không được thiếu:

oTable.$('td').tooltip({ 
    "delay": 0, 
    "track": true, 
    "fade": 100 
}); 
+1

Mẹo nhỏ tuyệt vời ở đó! Tôi đã làm việc w/datatables gần đây, và nó là đáng kinh ngạc mạnh mẽ. Câu hỏi duy nhất của tôi, điều này thực sự hiệu quả như thế nào? Tại sao đặt tiêu đề đủ để hiển thị chú giải công cụ? Tôi bối rối bởi điều đó. – rkd80

+0

Hi rkd80, chú giải công cụ là một thành phần giao diện người dùng jQuery (https://jqueryui.com/tooltip/) sẽ đọc thuộc tính tiêu đề. "oTable. $ ('td'). tooltip (..." cho thành phần tooltip hiển thị chú giải công cụ cho mọi phần tử td trong bảng. –

Các vấn đề liên quan