2012-07-03 9 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

आप प्रत्येक टीडी

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

के लिए बस setAttribute द्वारा शीर्षक सेट और टीडी

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

युप। और यदि टूलटिप की सामग्री टेक्स्ट होने के लिए नहीं है, तो आप अनिवार्य रूप से एक ही तकनीक का उपयोग कर अन्य जानकारी से सैद्धांतिक रूप से अन्य जानकारी पुनर्प्राप्त कर सकते हैं (उदाहरण के लिए, एक डेटा-विशेषता)। –

9

पर टूलटिप कॉल कर सकते हैं आप क्या कर सकते हैं

आपके कॉलम कॉन्फ़िगरेशन में

। आप आसानी से इस तरह के सभी पंक्ति डेटा का उपयोग कर सकते हैं। कारण, यह गायब नहीं होना चाहिए:

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

शानदार छोटी टिप वहाँ! मैं हाल ही में डब्ल्यू/डाटाटेबल्स काम कर रहा हूं, और यह आश्चर्यजनक रूप से मजबूत है। मेरा एकमात्र सवाल, यह वास्तव में कैसे काम करता है? टूलटिप का पर्दाफाश करने के लिए पर्याप्त शीर्षक क्यों सेट कर रहा है? मैं उस से उलझन में हूँ। – rkd80

+0

हाय rkd80, टूलटिप एक jQuery UI घटक (https://jqueryui.com/tooltip/) है जो शीर्षक विशेषता को पढ़ेगा। "oTable। $ ('td')। टूलटिप (..." तालिका में प्रत्येक टीडी तत्व के लिए टूलटिप दिखाने के लिए टूलटिप घटक बताता है। –

संबंधित मुद्दे