2012-07-03 36 views
5

如何修改代碼以將每個單元格信息顯示到工具提示中?如何顯示每個單元格的工具提示?

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 
}); 
}); 

回答

2

你可以通過簡單的setAttribute每個TD

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

設置標題和呼籲TD

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

是的。如果工具提示的內容不是文本,則理論上可以使用基本相同的技術從別處檢索其他信息(例如,數據屬性)。 –

9

提示你可以做

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

在您的列配置中。您可以像這樣輕鬆使用所有行數據。 原因,這一定不能錯過:

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

奇妙的小提示那裏!最近我一直在使用數據表,它非常強大。我唯一的問題,這實際上是如何工作的?爲什麼設置標題足以暴露工具提示?我很困惑。 – rkd80

+0

Hi rkd80,tooltip是一個jQuery UI組件(https://jqueryui.com/tooltip/),它將讀取title屬性。 「oTable。$('td')。tooltip(...」告訴工具提示組件顯示錶格中每個td元素的工具提示。 –

相關問題